Change Twitter Bootstrap Tooltip content on click
JqueryTwitter BootstrapTooltipJquery Problem Overview
I have a tooltip on an anchor element, that sends an AJAX request on click. This element has a tooltip (from Twitter Bootstrap). I want the tooltip content to change when the AJAX request returns successfully. How can I manipulate the tooltip after initiation?
Jquery Solutions
Solution 1 - Jquery
Just found this today whilst reading the source code. So $.tooltip(string)
calls any function within the Tooltip
class. And if you look at Tooltip.fixTitle
, it fetches the data-original-title
attribute and replaces the title value with it.
So we simply do:
$(element).tooltip('hide')
.attr('data-original-title', newValue)
.tooltip('fixTitle')
.tooltip('show');
and sure enough, it updates the title, which is the value inside the tooltip.
A shorter way:
$(element).attr('title', 'NEW_TITLE')
.tooltip('fixTitle')
.tooltip('show');
Solution 2 - Jquery
In Bootstrap 3 it is sufficient to call elt.attr('data-original-title', "Foo")
as changes in the "data-original-title"
attribute already trigger changes in the tooltip display.
UPDATE: You can add .tooltip('show') to show the changes immediately, you need not to mouseout and mouseover target to see the change in the title
elt.attr('data-original-title', "Foo").tooltip('show');
Solution 3 - Jquery
Here is update for the Bootstrap 4:
var title = "Foo";
elt.attr('data-original-title', title);
elt.tooltip('update');
elt.tooltip('show');
But the best way is to do like this:
var title = "Foo";
elt.attr('title', title);
elt.attr('data-original-title', title);
elt.tooltip('update');
elt.tooltip('show');
or inline:
var title = "Foo";
elt.attr('title', title).attr('data-original-title', title).tooltip('update').tooltip('show');
From the UX side you just see that text is changed with no fading or hide/show effects and there is no needs for the _fixTitle
.
Solution 4 - Jquery
you can update the tooltip text without actually calling show/hide:
$(myEl)
.attr('title', newTitle)
.tooltip('fixTitle')
.tooltip('setContent')
Solution 5 - Jquery
for Bootstrap 4:
$(element).attr("title", "Copied!").tooltip("_fixTitle").tooltip("show").attr("title", "Copy to clipboard").tooltip("_fixTitle");
Solution 6 - Jquery
heres a nice solution if you want to change the text without closing and reopening the tooltip.
$(element).attr('title', newTitle)
.tooltip('fixTitle')
.data('bs.tooltip')
.$tip.find('.tooltip-inner')
.text(newTitle)
this way, text replaced without closing tooltip (doesnt reposition, but if you are doing a one word change etc it should be fine). and when you hover off + back on tooltip, it is still updated.
**this is bootstrap 3, for 2 you probably have to change data/class names
Solution 7 - Jquery
This works if the tooltip has been instantiated (possibly with javascript):
$("#tooltip_id").data('tooltip').options.title="New_value!";
$("#tooltip_id").tooltip('hide').tooltip('show');
Solution 8 - Jquery
Bootstrap 4
$('#topic_1').tooltip('dispose').tooltip({title: 'Goodbye'}).tooltip('show')
https://getbootstrap.com/docs/4.1/components/tooltips/#tooltipdispose
$('#topic_1').tooltip({title: 'Hello'}).tooltip('show');
setTimeout( function() {
$('#topic_1').tooltip('dispose').tooltip({title: 'Goodbye'}).tooltip('show');
}, 5000);
#topic_1 {
border: 1px solid red;
margin: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
<div id="topic_1">Topic 1</div>
Solution 9 - Jquery
For bootstrap 3.x
This seems like cleanest solution:
$(element)
.attr('data-original-title', 'New title').tooltip('show')
Show is used to make title update right away and not wait for tooltip to be hidden and shown again.
Solution 10 - Jquery
You can just change the data-original-title
using the following code:
$(element).attr('data-original-title', newValue);
Solution 11 - Jquery
The following worked the best for me, basically I'm scrapping any existing tooltip and not bothering to show the new tooltip. If calling show on the tooltip like in other answers, it pops up even if the cursor isn't hovering above it.
The reason I went for this solution is that the other solutions, re-using the existing tooltip, led to some strange issues with the tooltip sometimes not showing when hovering the cursor above the element.
function updateTooltip(element, tooltip) {
if (element.data('tooltip') != null) {
element.tooltip('hide');
element.removeData('tooltip');
}
element.tooltip({
title: tooltip
});
}
Solution 12 - Jquery
In bootstrap 4 I just use $(el).tooltip('dispose');
then recreate as normal. So you can put the dispose before a function that creates a tooltip to be sure it doesn't double up.
Having to check the state and tinker with values seems less friendly.
Solution 13 - Jquery
You can set content on tooltip call with a function
$("#myelement").tooltip({
"title": function() {
return "<h2>"+$("#tooltipcontainer").html()+"</h2>";
}
});
You don't have to use only the title of the called element.
Solution 14 - Jquery
Thanks this code was very helpful for me, i found it effective on my projects
$(element).attr('title', 'message').tooltip('fixTitle').tooltip('show');
Solution 15 - Jquery
Destroy any pre-existing tooltip so we can repopulate with new tooltip content
$(element).tooltip("destroy");
$(element).tooltip({
title: message
});
Solution 16 - Jquery
I couldn't get any of the answers working, here's a workaround:
$('#'+$(element).attr('aria-describedby')+' .tooltip-inner').html(newTitle);
Solution 17 - Jquery
For BS4 (and BS3 with minor changes) .. after hours of searching and trials, i came up with the most reliable solution for this problem and it even solves the problem of opening more than one (tooltip or popover) at the same time, and the problem of opening automatically after losing focus, etc.
$('[data-toggle="tooltip"]').tooltip({
trigger: 'hover'
}).on('shown.bs.tooltip', function() {
var link = $(this);
var data = '';
data += '<ul style="list-style-type:none;margin:0;padding:0;text-align:left;font-size:12px">';
data += ' <li>Sherif Salah</li>';
data += ' <li>Muhammad Salah</li>';
data += ' <li>and a gazillion more...</li>';
data += '</ul>';
link.attr('data-original-title', data);
setTimeout(function() {
if (link.is(':hover')) {
link.tooltip("dispose").tooltip("show");
}
}, 1000);
});
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="card">
<div class="card-body text-center">
<a href="JavaScript:void(0);" class="btn btn-sm btn-link" data-toggle="tooltip" data-placement="top" data-html="true" title="Loading...">gazillion</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
Solution 18 - Jquery
I only tested this in bootstrap 4 & w/o calling .show()
el.tooltip('hide').attr('data-original-title', 'message');
Solution 19 - Jquery
I change the title in tooltip dynamicaly with ajax.
-
first just enable the tooltips:
$('[data-toggle="tooltip"]').tooltip()
-
Then change the title attribute, then re init the tooltip
$("#foo").attr('title','TheNewTitle');
$('[data-toggle="tooltip"]').tooltip('dispose');
$('[data-toggle="tooltip"]').tooltip()
Solution 20 - Jquery
Want to change tooltip content/title onclick like bootstrap docs. Did you notice when you copy a code example there? I'm using Bootstrap v5
here...
<span id="tooltip" class="btn btn-outline-primary" data-bs-toggle="tooltip" data-bs-placement="top"
title="Tooltip content">Tooltip</span>
Make sure you've enabled the Bootstrap5 tooltip before going to the next step
$('#tooltip').click(function() {
$(this).attr('data-original-title', 'Content changed!').tooltip('show');
$(this).attr('data-original-title', 'Tooltip content');
});
When you hover on this span element, it will show Tooltip content. When you click on it, this will change to Content changed! and will return to default title Tooltip content.
Solution 21 - Jquery
I think Mehmet Duran is almost right, but there were some problems when using multiple classes with the same tooltip and their placement. The following code also avoids js errors checking if there is any class called "tooltip_class". Hope this helps.
if (jQuery(".tooltip_class")[0]){
jQuery('.tooltip_class')
.attr('title', 'New Title.')
.attr('data-placement', 'right')
.tooltip('fixTitle')
.tooltip('hide');
}
Solution 22 - Jquery
Change the text by altering the text in the element directly. (does not update the tooltip position).
$('.tooltip-inner', $element.next()).html(newHtml);
$('.tooltip-inner', $element.next()).text(newText);
Change the text by destroying the old tooltip, then creating and showing a new one. (Causes the old one to fade out and the new one to fade in)
$element
.tooltip('destroy')
.tooltip({
// Repeat previous options.
title: newText,
})
.tooltip('show');
I'm using the top method to both animate the "Saving." message (using  
so the tooltip does not change in size) and to change the text to "Done." (plus padding) when the request completes.
$element.tooltip({
placement: 'left',
title: 'Saving...',
trigger: 'manual',
}).tooltip('show');
var parent = $element.parent();
var interval_id = setInterval(function(){
var text = $('.tooltip-inner', parent).html();
switch(text) {
case 'Saving. ': text = 'Saving.. '; break;
case 'Saving.. ': text = 'Saving...'; break;
case 'Saving...': text = 'Saving. '; break;
}
$('.tooltip-inner', parent).html(text);
}, 250);
send_request( function(){
// When the request is complete
clearInterval(interval_id);
$('.tooltip-inner', parent).html('Done. ');
setTimeout(function() {
$element.tooltip('hide');
}, 1500 /* Show "Done." for a bit */);
});
Solution 23 - Jquery
This worked for me: (bootstrap 3.3.6; jquery=1.11.3)
<a id="alertTooltip" href="#" data-html="true" class="tooltip" data-toggle="tooltip" title="Tooltip message"></a>
<script>
$('#alertTooltip').attr('title', "Tooltip new <br /> message").tooltip('fixTitle');
</script>
The attribute data-html="true"
allow to use html on the tooltip title.
Solution 24 - Jquery
With Tooltip object Boostrap :
$(element).attr('data-original-title', 'New value');
$(element).data('bs.tooltip').tip().find('.tooltip-inner').text('New value');
Solution 25 - Jquery
if you have set the title attribute in HTML then use on click of the icon or button $(this).attr('title',newValue);
Solution 26 - Jquery
Bootstrap 5 doesn't have fixTitle
or _fixTitle
anymore, so I had to dispose the entire Tooltip object and reconstruct it:
$('a.copy').click(function() {
var tt = bootstrap.Tooltip.getInstance(this);
tt.dispose();
this.setAttribute('title', 'Copied!')
tt = bootstrap.Tooltip.getOrCreateInstance(this);
tt.show();
}
Solution 27 - Jquery
you can use this code to hide the tool tip change its title and show the tooltip again, when the ajax request returns successfully.
$(element).tooltip('hide');
$(element).attr('title','this is new title');
$(element).tooltip('fixTitle');
setTimeout(function() { $(element).tooltip('show');}, 500);
Solution 28 - Jquery
I'm using this easy way out:
$(document).ready(function() {
$("#btn").prop('title', 'Click to copy your shorturl');
});
function myFunction(){
$(btn).tooltip('hide');
$(btn).attr('data-original-title', 'Test');
$(btn).tooltip('show');
});
Solution 29 - Jquery
$(this).attr('data-original-title', 'click here to publish')
.tooltip('fixTitle')
.tooltip('show');
Useful if you need to change a tooltip's text after it has been initialized with attr 'data-original-title'.