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

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

Answer 2

For me in bootstrap 4 this worked:

$("#xxx").tooltip("dispose").attr("title", "New Tooltip").tooltip()

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

You can see it here:

http://jsfiddle.net/NabiKAZ/a4WwQ/1029/

$('a[data-toggle="tooltip"]').tooltip({
  animated: 'fade',
  placement: 'bottom',
});

$('.mytooltip').hover(function() {
  $('.mytooltip').tooltip('show');
});

$('.mytooltip').click(function() {
  var newTooltip = 'Changed this tooltip!';
  $(this).attr('data-original-title', newTooltip).parent().find('.tooltip-inner').html(newTooltip);
});

.cart {
  overflow: hidden;
  padding: 10px 3px;
  background: yellow;
}

<div class="cart">
  <a data-toggle="tooltip" title="add to cart" class="mytooltip">
    <i class="icon-shopping-cart"></i>
  </a>
</div>

<br>

<div>
  <a data-toggle="tooltip" title="add to another cart" class="mytooltip">
    <i class="icon-shopping-cart"></i>
  </a>
</div>


<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;    
            background:lightgray;width:100%;'>
  About this SO Question: <a href='http://stackoverflow.com/q/19630749/1366033'>How to make bootstrap 3 tooltip work with parent div with overflow:hidden?</a><br/> Find documentation: <a href='http://getbootstrap.com/javascript/#tooltips'>Bootstrap 3.0 ToolTips</a><br/>  Fork This Skeleton Here <a href='http://jsfiddle.net/KyleMit/kcpma/'>Bootrsap 3.0 Skeleton</a><br/>
  <div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />

Answer 4

It's 2021 and with Bootstrap 5(BS5) all answers on this here didn't help me. Most answers above updated the content of the $(element).parent().find('.tooltip-inner').html("This is a test"); generated by the tooltip plugin. However with BS5 the generated template for the tooltip has a unique ID which can be used to update the tooltip.

This example demonstrates a simple scenario: when the .copy_queue_id div is clicked, queue ID from its attribute is copied and hence the the tooltip is updated to notify the user

HTML Markup:

<div class="cursor-pointer text-primary copy_queue_id" data-queueid="123456" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Click to copy"> 123456</small>

JS - JQuery

$(document).on('click', '.copy_queue_id', function(){
    let node = $(this);
    let id = node.data('queueid');
    navigator.clipboard.writeText(id);
    let tooltipid = node.attr('aria-describedby');
    $("#"+tooltipid).find('.tooltip-inner').html('ID Copied!!');
})

Tested & works in BS5 Hope this helps others :)

Answer 5

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 6

in case you are looking to refresh the contents;

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

Answer 7

2021, Bootstrap 5: update this property data-bs-original-title.

You can also use Razor / Blazor with this, like this:

var title = propExamples.FirstOrDefault(q => q.Key == selectedType.Id).Value;
<div class="col-sm-2">
    <img class="zoom-on-hover cursor-pointer fit-image grayout"
            src="/lib/bootstrap-icons-1.5.0/info-lg.svg"
            data-bs-toggle="tooltip" data-placement="bottom"
            data-bs-original-title="@title" />
</div>