Question

我是JQuery的新手，我正在尝试使用互联网上的一个功能，当您浏览HTML元素时会显示工具提示。

这是功能：

<script>
$(document).ready(function() {
   $('#my-tooltip').tooltipster({
        content: $('<span>This text is in bold case !</span>')
   });
});
</script>

<img src="img.jpg" id="my-tooltip">

假设我想将此函数应用于页面上的许多元素，例如：

  <img src="img1.jpg" id="my-tooltip1">
  <img src="img2.jpg" id="my-tooltip2">
  <img src="img3.jpg" id="my-tooltip3">

我该如何编辑该功能？我做不到

<img src="img.jpg1" id="my-tooltip1" onmouseover="javascript:functionName('tooltip1')" onmouseout="javascript:functionName('tooltip1')">

因为这个功能现在无法正常工作。

谢谢

Answer 1

如前所述，使用CSS类选择启用工具提示的元素。

可以使用自定义data-属性对工具提示的文本进行参数化。

$(document).ready(function() {
  $('.tooltip').each(function() {
    $(this).tooltipster({
      content: $(this).attr("data-tooltip")
    });
  });
});

.tooltip {
  cursor: help;
  height:100px;
  width:100px;
}
.tooltipster-base {
  display: inline-block;
  border: 1px solid #222;
  margin: 0;
  padding: 2px 4px;
  background: #ccc;
  border-radius:2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/js/jquery.tooltipster.js"></script>
<img class="tooltip" data-tooltip="I am a unicorn!" src="https://s-media-cache-ak0.pinimg.com/originals/e3/ab/d2/e3abd2c3b64151e4c1dfe59e5a2227dc.jpg">
<img class="tooltip" data-tooltip="Look at me!" src="http://cartoon-animals.disneyimage.com/_/rsrc/1367525874171/cartoon-unicorn-clipart/Unicorn-Clipart_7.png">
<img class="tooltip" data-tooltip="I poop rainbows" src="http://grid.turtlespeak.net/upload/LMo6pu2bZ3pYC5QU/iH3dtwYF1tOwoBd8/un1.png">

Answer 2

使用＆＃34; class＆＃34;而不是＆＃34; id＆＃34;，：

  <img src="img1.jpg" class="my-tooltip">
  <img src="img2.jpg" class="my-tooltip">
  <img src="img3.jpg" class="my-tooltip">

您的脚本将是这样的：

<script>
$(document).ready(function() {
   $('.my-tooltip').tooltipster({
        content: $('<span>This text is in bold case !</span>')
   });
});
</script>

Answer 3

使用类来标识应以类似方式运行的多个元素：

＆＃13;

<script>
$(document).ready(function() {
   $('.my-tooltip').tooltipster({
        content: $('<span>This text is in bold case !</span>')
   });
});
</script>

<img src="img.jpg" class="my-tooltip">

＆＃13;

注意我将选择器更改为$（＆＃39; .my-tooltip＆＃39;）...

然后将图片上的id属性更改为＆＃39; class＆＃39;。

Answer 4

您可以在title属性中使用html编码，如工具提示器的“入门”页面所述，或者您可以为每个图像调用一次工具提示并指定其他文本。

<script>
$(document).ready(function() {
   $('#my-tooltip1').tooltipster({
        content: $('<span>You can tip me</span>')
   });
   $('#my-tooltip2').tooltipster({
        content: $('<span>I would like to go boldly</span>')
   });
   $('#my-tooltip3').tooltipster({
        content: $('<span>Hello there</span>')
   });
});

如何将变量传递给Jquery函数

4 个答案: