Foundation Zurb Unable To Change Tooltip Text

I’m having a problem changing the tooltip text on runtime after the tooltip text has already been set. Please see below for more information. Please can I have the correct code

Solution 1:

After much trial and error and looking through the code... I figured this out!

Foundation.libs.tooltips.getTip($('#labelID')).remove();

Call that code after removing the attribute title, and call afftr('title', 'new tooltip text') after that! And boom! it works!

Solution 2:

I'd like to answer this question more simply... Foundation generates a new span for the content of each tooltip on page load (class="tooltip"). You are welcome to change the element title, but it won't change the tooltip after load. Instead, change the span element content.

thingy = $('#labelID'); // element whose tooltip you want to change
wich = $("has-tip").index(thingy); // which has-tip element is it? [int]
say = "here's the new tooltip content"; // new tooltip content
$(".tooltip").eq(wich).html(say); // assign span content

You won't need to reflow after this or anything. It will just work.

Solution 3:

In the meantime this is:

Foundation.libs.tooltip.getTip($('#labelID')).remove();

After that you have to call:

$('#labelID').attr('title','Your new title');

Solution 4:

You can change the tooltip by changing the html of the mapped tooltip element.

<p><ahref="#"id="fav-123"class="item-display-button fav-button active"data-tooltip=""title="">test</a></p><spandata-selector="fav-123"class="tooltip"style="visibility: visible; display: none; width: auto; top: 31px; bottom: auto; left: auto; right: auto;">Changed!</span>

jsFiddle

Solution 5:

Lakshay is right, changing the html of the tooltip is the easiest and most efficient solution. Here is the jQuery one-liner to achieve that:

Foundation.libs.tooltip.getTip($('#labelID')).contents().first().replaceWith('Changed');

where labelID is the ID of the element that has the tooltip, not the tooltip element itself.