基金会Zurb无法更改工具提示文本

时间:2014-01-21 08:06:52

标签: javascript jquery html css zurb-foundation

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

请问我是否可以使用正确的代码更改工具提示文字或解决以下问题?

作为一个例子,我创建了一个空白的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>

好的,点击第一个按钮&#34; addFirstTooltip&#34;正确添加基础工具提示。没问题。但是一旦你更改工具提示文本(&#34; changeTooltip&#34;按钮),它基本上会创建一个带有新文本的附加库存html工具提示,并且不会更改原始基础工具提示文本。

有人有解决方案吗?

5 个答案:

答案 0 :(得分:2)

经过多次试验和错误并查看代码......我想出来了!

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

删除属性标题后调用该代码,然后调用afftr(&#39; title&#39;,&#39; new tooltip text&#39;)!繁荣!它有效!

答案 1 :(得分:1)

与此同时,这是:

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

之后你必须打电话:

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

答案 2 :(得分:1)

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

答案 3 :(得分:1)

Lakshay是对的,更改工具提示的html是最简单,最有效的解决方案。 这是实现这一目标的jQuery单行程序:

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

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

答案 4 :(得分:1)

我想更简单地回答这个问题...... 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

此后或任何事情都不需要回流。它会起作用。