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>')
});

我想你想在这种情况下设置一些显示图像的工具提示，让我们假设每个人都有一个类＆＃34; test＆＃34;。

$(".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"); });

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

Answer 3

你可以试试这个小技巧!!

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

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

从工具提示中获取属性

3 个答案: