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?

Paramecium

It will help if you post the code – Cerenkov

Well im not sure of any 'Refresh' events in bootstrap, but a work around would be to internally call the mouseover` event at the end of click event callback. – Mazda

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

Mazda

Perfect, exactly what I wanted. So mouseover() was what I was missing. Thanks! – Paramecium

Don't work with Bootstrap 3.3.0+ , You can try it test failed here: jsfiddle.net/NabiKAZ/GRyAN/404 I suggest to use this solution: https://mcmap.net/q/899520/-refresh-an-element-so-its-new-tooltip-shows-in-jquery-javascript – Bolt

@NabiK.A.Z.: interesting, looks like there has been major change in the way tooltip is implemented in bootstrap version 3.3.0+, since this was a hack and not a real solution from bootstrap, they never bothered maintain same logic in new version of bootstrap (i.e from 3.0+). anyway good to know this. – Mazda

Answer 2

For me in bootstrap 4 this worked:

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

Anagoge

It worked for me when I hover over it again. To have it instant I added $("#xxx").trigger("mouseover") and it works like a charm. – River

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='https://mcmap.net/q/631536/-how-to-make-bootstrap-3-tooltip-work-with-parent-div-with-overflow-hidden/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" />

Bolt

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

Chromolithograph

This is the only solution that worked for me in 2022, all other solutions didn't update the tooltip (as intended) unless you moved the mouse. On this solution, if your new message is longer than your initial message, setting an absolute width on the element can help avoid a new, smaller title, being far from the mouse area. – Escalera

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!

Encrust

As you said, If there is two tooltips in the page, Your solution didn't worked good. I thinks this solution is better: https://mcmap.net/q/899520/-refresh-an-element-so-its-new-tooltip-shows-in-jquery-javascript – Bolt

Agreed - I've updated your jsfiddle as all tooltips were showing when hovering over one. jsfiddle.net/a4WwQ/1031 – Encrust

Answer 6

in case you are looking to refresh the contents;

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

Bebop

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>

Free