从工具提示中获取属性

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

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

添加一个类名tooltipShow [或任何东西]，您想在其上显示工具提示。使用该类在您的元素上捕获hover，如下所示：

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

Answer 3

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

示例：

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

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