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

I’m having a problem changing the tooltip text on runtime after the tooltip text has already been set. Please see below for more information.

在工具提示文本设置完成后，我在运行时修改工具提示文本有问题。

Please can I have the correct code to change the tooltip text or a work around for the below problem?

请给我正确的代码来修改工具提示文本或者解决下面的问题?

As an example I've created a blank html page, with one label, and 2 buttons:

例如，我创建了一个空白的html页面，有一个标签和两个按钮:

<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>

Okay so clicking the first button "addFirstTooltip" correctly adds the foundation tooltip. No problem at all. But as soon as you change the tooltip text ("changeTooltip" button), it basically creates an addition stock html tooltip with the new text, and does not change the original foundation tooltip text.

好的，点击第一个按钮“addFirstTooltip”可以正确地添加foundation工具提示。一点问题也没有。但是，一旦您更改了工具提示文本(“changeTooltip”按钮)，它就会使用新文本创建一个添加股票html工具提示，并且不会更改原始的基础工具提示文本。

Does anyone have a solution for this?

有人能解决这个问题吗?

5 个解决方案

#1

After much trial and error and looking through the code... I figured this out!

经过大量的尝试和错误，并查看代码……我想这个了!

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

Call that code after removing the attribute title, and call afftr('title', 'new tooltip text') after that! And boom! it works!

删除属性标题后调用该代码，然后调用afftr('title'， 'new tooltip text') !和繁荣!它的工作原理!

#2

You can change the tooltip by changing the html of the mapped tooltip element.

可以通过更改映射的tooltip元素的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

Lakshay is right, changing the html of the tooltip is the easiest and most efficient solution. Here is the jQuery one-liner to achieve that:

Lakshay是对的，更改工具提示的html是最简单、最有效的解决方案。以下是实现这一点的jQuery一行代码:

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

where labelID is the ID of the element that has the tooltip, not the tooltip element itself.

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

#4

I'd like to answer this question more simply... Foundation generates a new span for the content of each tooltip on page load (class="tooltip"). You are welcome to change the element title, but it won't change the tooltip after load. Instead, change the span element content.

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

You won't need to reflow after this or anything. It will just work.

你不需要在这之后再回流。它只会工作。

#5

In the meantime this is:

同时，这是:

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

After that you have to call:

之后你必须打电话:

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

#1