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 tooltip isn't showing until I remove the mouse from it and re-hover over the element again.

I want the tooltip to be shown instantly when said button is clicked. How can I achieve this? Is there a way to "refresh", in lack of better words, an html element?

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 latest version as well.

Happy Coding:)

Answer 2

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 3

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!