Question

根据要求，我想更新现有的醉名衔，但似乎不起作用。

场合

HTML：

<ul>
    <li id="li1">Point at me (title -> value)</li>
    <li id="li2">Point at me (title -> callback)</li>
    <li id="li3" original-title="FooBar1">Point at me (title -> html attribute)</li>
</ul>

<button>Click me to update</button>

JS：

$('#li1').tipsy({
    title: 'FooBar1'
});
$('#li2').tipsy({
    title: function() { return 'FooBar1'; }
});
$('#li3').tipsy();
$('button').click(function() {
    alert('Updating tipsy titles');

    // Try setting title attribute
    $('li1')[0].setAttribute('title', 'FooBar2');
    $('li2')[0].setAttribute('title', 'FooBar2');
    $('li3')[0].setAttribute('title', 'FooBar2');

    // Try setting original-title attribute
    $('li1')[0].setAttribute('original-title', 'FooBar2');
    $('li2')[0].setAttribute('original-title', 'FooBar2');
    $('li3')[0].setAttribute('original-title', 'FooBar2');
});

你可以在jsFiddle：http://jsfiddle.net/TvFmG/3/

中玩这个

问题

我遇到以下问题：

通过tipsy({title: 'string'})设置标题似乎根本不起作用。
tipsy docs建议您可以通过设置original-title属性来更新标题值（请参阅“动态更新文本”部分），但这似乎不适用于我的情况（请参阅的jsfiddle）。

这些醉意的文档是否完全错误，是否存在某些版本不兼容或是否是阻止此示例工作的其他问题？

Answer 1

文档似乎是正确的，并按照我的理解工作。

.tipsy({title: 'attribute'})

用于查找元素上的属性，并从中做出一些提示。默认值为title属性。所以对于问题中的例子：

$('#li1').tipsy({
    title: 'FooBar1'
});

这是尝试在FooBar1上找到一个名为#li1的属性，它不存在。 tipsy将查找的默认属性是 title 属性。所以你需要这样的东西：

<li id="li1" title="hooray!">Point at me (title -> value)</li>

或使用自定义属性并在tipsy构造函数中指定。

<li id="li1" FooBar1="title from a custom attribute">Point at me (title -> value)</li>

$('#li1').tipsy({
    title: 'FooBar1'
});

对于通过问题的点击部分进行的设置，此行上的JavaScript中存在错误（尽管出于同样的原因，下一行也会出现同样的错误）。

$('li1')[0].setAttribute('title', 'FooBar2');

选择器缺少前导#，因此jQuery找不到您的元素。它应该是$('#li1')，$('#li2')等......

但是，只有在尚未覆盖每个tipy构造函数中的title时，才能以这种方式设置标题。因此，在这种情况下，您的代码仅适用于 li3 ，因为其他代码具有自定义标题函数，该函数始终返回 FooBar1 。

完整示例：

<li id="li3" original-title="FooBar1">Point at me (title -> html attribute)</li>

$('#li3').tipsy();

将返回 FooBar1 。然后调用$('#li3')[0].setAttribute('title', 'FooBar2');它将返回 FooBar2 。

Answer 2

尝试使用fiddle

HTML

<ul>
    <li id="li3" original-title="FooBar1">Point at me (title -> html attribute)</li>
</ul>

Javascript代码

  $('#li3').tipsy();
  $('button').click(function() {
      $('#li3').attr('original-title', 'FooBar2');
   });

jQuery tipsy：动态更新标题

场合

问题

2 个答案: