Menu
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?
986
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!
150
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With