Foundation Zurb unable to change tooltip text

问题

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:

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

Does anyone have a solution for this?

回答1:

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.

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.

回答2:

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!

回答3:

In the meantime this is:

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

After that you have to call:

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

回答4:

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

<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

回答5:

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:

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.

来源：https://stackoverflow.com/questions/21252412/foundation-zurb-unable-to-change-tooltip-text

标签

javascript

jquery

html

css

zurb-foundation