Foundation Zurb 无法更改工具提示文本答案

【问题标题】：Foundation Zurb unable to change tooltip textFoundation Zurb 无法更改工具提示文本
【发布时间】：2014-01-21 08:06:51
【问题描述】：

在设置工具提示文本后，我在运行时更改工具提示文本时遇到问题。请参阅下文了解更多信息。

请问我可以有正确的代码来更改工具提示文本或解决以下问题吗？

作为一个例子，我创建了一个空白的 html 页面，带有一个标签和 2 个按钮：

<body>

<div class="row" style='padding-top:20px;'>
<div class="large-12 columns">
<label id='labelID'> my Tooltip label</label>

<input type='button' class='button' id='addFirstTooltip' value='Add First Tooltip'/>
<input type='button' class='button' id='changeTooltip' disabled value='Change Tooltip'/>
</div>
</div>

<script>
$(document).ready(function() 
{
  $(document).on('click', '[id^=addFirstTooltip]', function()
  {
     $('#labelID').attr('data-tooltip', '');
     $('#labelID').attr('title', 'My First tooltip text. This displays correctly.');

     $('#changeTooltip').removeAttr('disabled');
  });
  $(document).on('click', '[id^=changeTooltip]', function()
  {
     $('#labelID').attr('title', 'Now ive changed the tooltip text. Not displaying correctly.');
  });
});
</script>
</body>

好的，因此单击第一个按钮“addFirstTooltip”会正确添加基础工具提示。完全没有问题。但是，一旦您更改了工具提示文本（“changeTooltip”按钮），它基本上会使用新文本创建一个额外的库存 html 工具提示，并且不会更改原始基础工具提示文本。

有人对此有解决方案吗？

【问题讨论】：

标签： javascript jquery html css zurb-foundation

【解决方案1】：

经过多次试验和错误并查看代码...我想通了！

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

在删除属性标题后调用该代码，然后调用 afftr('title', 'new tooltip text') ！和繁荣！它有效！

【讨论】：

这对我有用，但我将工具提示更改为工具提示，看起来像这样 Foundation.libs.tooltip.getTip($('#labelID')).remove();。谢谢:)

【解决方案2】：

我想更简单地回答这个问题... Foundation 在页面加载时为每个工具提示的内容生成一个新的跨度 (class="tooltip")。欢迎您更改元素标题，但加载后不会更改工具提示。而是更改 span 元素的内容。

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

在此或其他任何事情之后，您都不需要回流。它会起作用的。

【讨论】：

这是一个简单的解决方案，不需要您删除任何内容。谢谢@scot-nery！
在基础 6.1.1 中这不起作用，但以下方法起作用：var tooltipId = $("#my-element.has-tip").attr("data-toggle"); $("#"+tooltipId).html("new content");
嗨@Scot Nery，这可行，但工具提示的位置变为顶部，有什么想法如何保留其原始位置？

【解决方案3】：

与此同时，这是：

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

之后你必须调用：

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

【讨论】：

【解决方案4】：

您可以通过更改映射的工具提示元素的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>

jsFiddle

【讨论】：

【解决方案5】：

Lakshay 是对的，更改工具提示的 html 是最简单有效的解决方案。这是实现这一目标的 jQuery one-liner：

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

其中labelID 是具有工具提示的元素的 ID，而不是工具提示元素本身。

【讨论】：

如果您的新文本是空字符串''，请小心。例如，如果您将工具提示替换为''，然后尝试将其替换回'Changed'，它将不起作用。