Replacing tooltip in Zurb Foundation

Question

I'm attempting to change Foundation Zurb tooltip text using JQuery, but so far unsuccessful.

Instead of replacing text inside the tooltip, my code removes the tooltip and only replaces the title.

<i id="fav-123" class="fa fa-star item-display-button fav-button active" data-tooltip class="has-tip" title="Remove move from favorites"></i>
<i id="fav-456" class="fa fa-star item-display-button fav-button" data-tooltip class="has-tip" title="Add to favorites"></i>

My Javascript snippet (msg is returned from AJAX call - Either 'a' for Added or 'r' for Removed :

if (msg == 'a') {
    $(target).removeAttr('title');
    Foundation.libs.tooltip.getTip($('#'+target.id)).remove();
    $(target).prop('title','Remove move from favorite');
    $(target).addClass('active');
} else if (msg == 'r') {
    $(target).removeAttr('title');
    Foundation.libs.tooltip.getTip($('#'+target.id)).remove();
    $(target).prop('title','Add move to favorites');
    $(target).removeClass('active');
}

Any suggestions?

Thanks!

Answer 1

You should change the value of the element's tooltip html generated by Zurb Foundation.

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

Change the html of the span mapped to the element by property "data-selector".

I hope this solves your concern!

Updated jsFiddle