设置工具提示文本后,在运行时更改工具提示文本时遇到问题。请参阅下面的更多信息。
请提供正确的代码来更改工具提示文本或解决以下问题吗?
作为示例,我创建了一个空白的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工具提示,并且不会更改原始基础工具提示文本。
有人对此有解决方案吗?
我想更简单地回答这个问题...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
此步骤或其他步骤后,您无需进行回流焊。它将正常工作。
经过反复试验并仔细阅读代码,然后我发现了!
Foundation.libs.tooltips.getTip($('#labelID')).remove();
删除属性标题后调用该代码,然后再调用afftr('title','new tooltip text')!和繁荣!它有效!
同时,这是:
Foundation.libs.tooltip.getTip($('#labelID')).remove();
此后您必须致电:
$('#labelID').attr('title','Your new title');
您可以通过更改映射的工具提示元素的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>
Lakshay是正确的,更改工具提示的html是最简单,最有效的解决方案。这是实现这一目标的jQuery单行代码:
Foundation.libs.tooltip.getTip($('#labelID')).contents().first().replaceWith('Changed');
其中labelID
是具有工具提示的元素的ID,而不是工具提示元素本身的ID。