Refresh an element so its new tooltip shows (in jQuery/Javascript)

Question

I have an html element which is using bootstrap tooltip to show a title when hovering over it. However, when you click this element I\'m changing the tooltip, but the new to

Answer 1

try this way

HTML CODE:

 <h3>
Sensors Permissions
   <i class="icon-info-sign" data-toggle="tooltip" title="first tooltip" id='example'></i>
 </h3>

JQUERY CODE:

$(document).ready(function () {
   $('#example').tooltip();
   $('#example').on('click', function () {
     $(this).attr('data-original-title', 'changed tooltip');
     $('#example').tooltip();
     $(this).mouseover();
   });
});

LIVE DEMO:

http://jsfiddle.net/dreamweiver/9z404crn/

Note: Above logic works only with Bootstrap version 2.3.2 and below, however, the solution provided by @NabiK.A.Z's would work with the latest versions of Bootstrap lib.

Happy Coding:)

Answer 2

Sure you just have to change the tooltips text within the onclick event

$('.tooltip-inner').html("This is a test");

I've created a jsfiddle for you as a demonstration http://jsfiddle.net/a4WwQ/59/

Currently it will change all visible tooltips text which isnt really a problem since you arent going to show more than one at at a time. That being said, you should consider modifying the code to point to the closest tooltip.

hope it helps!

Answer 3

You can use this code:

var newTooltip = 'Changed this tooltip!';
$('#example').attr('data-original-title', newTooltip).parent().find('.tooltip-inner').html(newTooltip);

I test it with bootstrap 3.3.4 here you can see it: http://jsfiddle.net/NabiKAZ/a4WwQ/1029/

Answer 4

in case you are looking to refresh the contents;

$('#example').tooltipster('content', 'i am superman!');