jQuery tipsy: Dynamically update title

Question

As per requirement, I want to update an existing tipsy title, but it doesn't seem to work.

Situation

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

You can play with this in a jsFiddle: http://jsfiddle.net/TvFmG/3/

Problems

I'm having the following problems:

• Setting the title via tipsy({title: 'string'}) doesn't seem to work at all.
• The tipsy docs suggest that it's possible to update the title value by setting the original-title attribute (see section "Dynamically Updating Text"), but that doesn't seem to work in my case (see jsfiddle).

Are the tipsy docs plain wrong, is it some version incompatibility or is it some other issue that prevents this example from working?

Answer 1

The documentation seems to be correct and working as I understand it.

.tipsy({title: 'attribute'})

is used to find the attribute on the element and make a tipsy from that. The default is the title attribute. So for the example in the question:

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

this is trying to find an attribute called FooBar1 on #li1 which does not exist. The default attribute tipsy will look for is the title attribute. So you need something like:

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

or use a custom attribute and specify that in the tipsy constructor.

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

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

For the setting via a click part of the question, there is an error in the JavaScript on this line (although that same error would also occur on the next lines for the same reason).

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

The selector is missing the leading # so jQuery is not finding your element. It should be $('#li1'), $('#li2') etc…

However, setting the title in this way will only work if you haven't already overridden the title in each tipsy constructor. So your code will only work with li3 in this case since the others have a custom title function which always returns FooBar1.

Full example:

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

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

will return FooBar1. By then calling $('#li3')[0].setAttribute('title', 'FooBar2'); it will return FooBar2.

Answer 2

try this out working fiddle

HTML

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

Javascript code

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