javascript - 从工具提示中获取属性

Question

我tooltipster用来生成工具提示，但我想根据它所附加的元素的数据属性设置工具提示。如何获取相关数据，以便我可以设置图像 url，如下所示。这是我一直在尝试的：

$(".test").tooltipster({
  var datainfo = $(this).data("info");
  content: $('<div class="desc"><img src="img/'+datainfo+'.jpg"/></div>')
});

我的 HTML 基本上是：

<div class="test tooltip" data-info="AAA">Testing</div>

Answer 1

您的参数是 json，而不是功能块，因此您需要将 datainfo 行从那里取出（它是 javascript，而不是 json）。也许这对你有用：

var datainfo = $(".test").data("info");
$(".test").tooltipster({
  content: $('<div class="desc"><img src="img/'+datainfo+'.jpg"/></div>')
});

我想您想在这种情况下设置许多显示图像的工具提示，假设每个工具提示都有“测试”类。

$(".test").each(function(){
  $(this).tooltipster({
      content: $('<div class="desc"><img src="img/' + $(this).data("info") + '.jpg"/></div>')
  });
});

Answer 2

您的插件可能无法以这种方式工作。您正在传递几行代码，而不是插件中的键、值对选项。如果你想要data-info值，简单的解决方案是绑定 mouseover 事件，然后获取该属性值。

例子：

$(".test").on("mouseover",function(){
    var datainfo = $(this).attr("data-info");
});

注意：如果插件删除了数据属性，那么您可能需要使用另一个属性来获取图像的 src。

Answer 3

一个小技巧你可以在这里试试！！

tooltipShow添加要在其上显示工具提示的类名[或任何内容]。使用该类来捕获hover您的元素，如下所示：

$('.tooltipShow').on('hover',function(){
    $(this).tooltipster({
         content: $('<div class="desc"><img src="img/'+$(this).data('info')+'.jpg"/></div>')
    });
});