tooltipster 中的属性/变量被忽略答案

【问题标题】：Attributes / vars in tooltipster are ignoredtooltipster 中的属性/变量被忽略
【发布时间】：2016-07-13 15:53:02
【问题描述】：

我已经尝试了两天来弄清楚为什么 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 页面中）。我尝试了几种编码变体，包括添加 ' ; ' 等等，但它不会改变结果。我还尝试使用以下方法获取元素的属性：

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

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

【问题讨论】：

标签： javascript variables attributes tooltipster

【解决方案1】：

最可能的原因是

var data = 'toto';

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

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

【讨论】：

感谢您快速简洁的回复。但是，您如何检索给定图像的属性（例如“alt”）并将它们传递给内容部分？其他主题和谷歌搜索表明我 var 是某人普遍接受的？！我很困惑/例如：stackoverflow.com/questions/28897699/…

【解决方案2】：

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

这之前不起作用的原因是：

您在传递给 tooltipster 函数的 JSON 对象中声明变量 data - 这对于 JavaScript 来说是无效的语法。
您的第二次尝试更接近，但在 content 属性中使用 this 是对“外部”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);
        }
    });
});

我希望这会有所帮助:)

【讨论】：