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

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

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?

Solution

try this way

Demo :

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

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

h3 {
  margin-top: 50px;
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>

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:)