在设置工具提示文本后,我在运行时更改工具提示文本时遇到问题。请参阅下面的更多信息。
请问我是否可以使用正确的代码更改工具提示文字或解决以下问题?
作为一个例子,我创建了一个空白的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工具提示,并且不会更改原始基础工具提示文本。
有人有解决方案吗?
答案 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>
答案 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
此后或任何事情都不需要回流。它会起作用。