Question

我已经尝试了两天来弄清楚为什么tooltipster（这很棒顺便说一句）没有考虑javascript / head部分中声明的任何var。例如：

<script>
$(document).ready(function() {
    $('.tooltip').tooltipster({
        var data = 'toto';
        contentAsHTML: true,
        animation: 'slide',
        delay: 100,
        content : $(data)
        });
});
</script>

使用：

<img src="Pics/winter.png" alt="winter" border="1" class="tooltip" />

根本不起作用（意味着工具提示未显示在HTML页面中）。我尝试了几种编码变体，包括添加＆＃39; ; ＆＃39;等但它没有改变结果。我还尝试使用以下方法获取元素的属性：

content : '$(this).attr('alt')'

这是我的最终目标，它也不起作用。我错过了什么？

Answer 1

最可能的原因是

var data = 'toto';

contentAsHTML，animation，delay，content等是tooltipster接受的选项。

但是当它遇到var data = 'toto';时会发生错误，因为它不是tooltipster可以接受的选项

Answer 2

我快速jsFiddle演示了从原始元素设置工具提示内容的“正确”方法 - 在它的初始化上。

之前没有工作的原因是：

您声明传递给data函数的JSON对象中的变量tooltipster - 这是JavaScript的无效语法。
您的第二次尝试更接近，但在this属性中使用content是对“外部”this范围的模糊引用 - 可能与工具提示实例或HTML节点无关之后。

这是修改后的代码，应该做你想要的：

$(document).ready(function() {
    $('.tooltip').tooltipster({
        contentAsHTML: true,
        animation: 'slide',
        delay: 100,
        functionInit: function(instance, helper) {
          var alt = $(helper.origin).attr('alt');
          instance.content(alt);
        }
    });
});

我希望这会有所帮助：）

tooltipster中的属性/变量将被忽略

2 个答案: