从工具提示中获取属性

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，不是功能块，因此您需要从那里取出数据信息行（它是 javascript，而不是 json）。也许这对你有用：

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

在这种情况下，我想你想设置一些显示图像的工具提示，我们假设每个工具提示都有 class "test".

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

Answer 2

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

示例：

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

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

Answer 3

好吧，你可以在这里尝试一个小技巧！！

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

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

从工具提示中获取属性

Get attribute from tooltip

javascript

jquery

tooltip

tooltipster