Menu icon Foundation
Foundation - 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?

I’ve also created a basic html page with an easy example with one label and 2 buttons.

<!DOCTYPE html>
<!--[if IE 8]>     			 <html class="no-js lt-ie9" lang="en" > <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]-->

<head>
	<meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Foundation 4</title>
  <link rel="stylesheet" href="css/foundation.css">
  <script src="js/vendor/custom.modernizr.js"></script>

</head>
<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.write('<script src=' +
  ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
  '.js><\/script>')
  </script>
  <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>
  <script src="js/foundation.min.js"></script>
  <script>
    $(document).foundation();
  </script>
</body>
</html>

Image1

Now clicking on the first button will add the tooltip via JQuery and remove the disabled attribute from the second button and also will see that the tooltip displays correctly:

$(document).on('click', '[id^=addFirstTooltip]', function()
{
                $('#labelID').attr('data-tooltip', '');
                $('#labelID').attr('title', 'My First tooltip text. This displays correctly.');
                $('#changeTooltip').removeAttr('disabled');
});

Image2

Now when you click the second button, it executes the following code and changes the title attribute which should in theory change the text of the tooltip:

$(document).on('click', '[id^=changeTooltip]', function()
{
                $('#labelID').attr('title', 'Now ive changed the tooltip text. Not displaying correctly.');
});

And what happens is that it creates an additional tooltip and does not change the original tooltip.

Image3

This is a major problem as I need to change the tooltip without refreshing the page.

tooltipjavascriptjqueryhtml

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?

I’ve also created a basic html page with an easy example with one label and 2 buttons.

<!DOCTYPE html>
<!--[if IE 8]>     			 <html class="no-js lt-ie9" lang="en" > <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]-->

<head>
	<meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Foundation 4</title>
  <link rel="stylesheet" href="css/foundation.css">
  <script src="js/vendor/custom.modernizr.js"></script>

</head>
<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.write('<script src=' +
  ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
  '.js><\/script>')
  </script>
  <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>
  <script src="js/foundation.min.js"></script>
  <script>
    $(document).foundation();
  </script>
</body>
</html>

Image1

Now clicking on the first button will add the tooltip via JQuery and remove the disabled attribute from the second button and also will see that the tooltip displays correctly:

$(document).on('click', '[id^=addFirstTooltip]', function()
{
                $('#labelID').attr('data-tooltip', '');
                $('#labelID').attr('title', 'My First tooltip text. This displays correctly.');
                $('#changeTooltip').removeAttr('disabled');
});

Image2

Now when you click the second button, it executes the following code and changes the title attribute which should in theory change the text of the tooltip:

$(document).on('click', '[id^=changeTooltip]', function()
{
                $('#labelID').attr('title', 'Now ive changed the tooltip text. Not displaying correctly.');
});

And what happens is that it creates an additional tooltip and does not change the original tooltip.

Image3

This is a major problem as I need to change the tooltip without refreshing the page.

Brandon Kent almost 6 years ago

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!

Rafi Benkual almost 6 years ago

Nice to see you got it. The solution may help others, thanks!

Maurice Ituriu over 5 years ago

I have the same problem but your solution throws this error in the console.

Uncaught TypeError: Cannot read property 'getTip' of undefined

Where am I going wrong?

William Doman about 5 years ago

Is there away to use getTip, i see it in the foundatoin.js but i cant seem to get to.

Is there a way to update the tooltip dynamically??

Rafi Benkual about 5 years ago

Regarding generating tooltips: you might check this out: https://github.com/zurb/foundation/issues/5503

Travis Johnston almost 5 years ago

Brandon's solution worked for me, except I had to remove the "s" on the "tooltips" object. e.g.:

Foundation.libs.tooltip.getTip($('...')).remove()

Víctor Salvans over 3 years ago

Brandon's solution didn't work for me, I'm using version 5.5.3

But I could use this code and it works fine without removing o changing attributes:

 Foundation.libs.tooltip.getTip($element_with_tooltip).html('Your new title<span class="nub"></span>');

EDIT: I've forgotten to format the code as code, so you can see the span tag at the end of the title.

Rafi Benkual over 3 years ago

Cool @Víctor Salvans Thanks for sharing your solution!

Designer over 3 years ago

This example works better than anything else out there. Unfortunately, replacing either html or text means it also kills the little tooltip's border arrow thing. So all I get now is a black rectangle...but I'll take it.

Michael Dietz over 3 years ago

@Víctor Salvans great works perfect thanks! And does not have the "border arrow thing" issue @Emlyn Addison spoke of.