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

问题描述 投票:5回答:5

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

请提供正确的代码来更改工具提示文本或解决以下问题吗?

作为示例,我创建了一个空白的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
5个回答
3
投票

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

此步骤或其他步骤后,您无需进行回流焊。它将正常工作。


2
投票

经过反复试验并仔细阅读代码,然后我发现了!

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

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


2
投票

同时,这是:

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

此后您必须致电:

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

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


1
投票

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

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

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

© www.soinside.com 2019 - 2024. All rights reserved.