javascript - 替换 Zurb Foundation 中的工具提示

Question

我正在尝试使用 JQuery 更改 Foundation Zurb 工具提示文本，但到目前为止没有成功。

我的代码没有替换工具提示中的文本，而是删除了工具提示，只替换了标题。

<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>

我的 Javascript 片段(msg 是从 AJAX 调用返回的——“a”表示添加，“r”表示删除:

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

有什么建议吗？

谢谢!

Answer 1

您应该更改由 Zurb Foundation 生成的元素的工具提示 html 的值。

<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>

通过属性“data-selector”更改映射到元素的 span 的 html。

希望这能解决您的疑虑!

Updated jsFiddle