我需要几个HTML元素,以便在悬停时显示工具提示。这些不是常规的HTML元素,它们来自后端的生成脚本,我没有更改权限。从前端角度来看,我想知道的是如何显示工具提示而无需在HTML中声明。

我尝试使用Bootstrap工具提示,但是您需要在HTML标记中将其声明为标题,因此它没有用。因此,如下面的示例所示,当您将鼠标悬停在包含“应该”的“动作”元素上时,需要在工具提示中显示一些文字,即“动作”。当您将鼠标悬停在'Quantifier'元素中包含的文本'approximate number of'时,将会应用相同的字词-应该显示单词'Quantifier'。希望这是有道理的。

 <body>
 One string that <Action>should</Action> work is
 <Quantifier>approximate number of</Quantifier> other things.

 <script>
  $(document).ready(function(){
   $("Action").hover(function(){

   });
   $("Quantifier").hover(function(){

    });
  });
 </script>
 <body>


到目前为止,尚无定论,因为我只能更改CSS值,而不能更改工具提示文本。

最佳答案

您可以尝试更新这些元素上的title属性。需要注意的一件事是,HTML标记在编译时将以小写形式显示。



$(document).ready(function() {
  var style = document.createElement('style');
  style.type = 'text/css';
  $('head')[0].appendChild(style);
  style.innerHTML =
    `action, quantifier {
      position: relative;
      display: inline-block;
      margin-top: 20px;
    }

    action[title]:hover:after, quantifier[title]:hover:after {
      content: attr(title);
      position: absolute;
      top: -100%;
      left: 0;
    }

    action[title]:hover:after {
      color: red;
      border: solid 1px black;
    }

    quantifier[title]:hover:after {
      color: blue;
      border: solid 1px black;
    }`;

  $('action')[0].title = 'Action';
  $('quantifier')[0].title = 'Quantifier';

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
One string that <Action>should</Action> work is
<Quantifier>approximate number of</Quantifier> other things.
</body>

08-06 01:33
查看更多