CODEWITHSUNDEEP
jquerytwitter-bootstraptooltip
rebellion
rebellion

Reputation: 6740

Change Twitter Bootstrap Tooltip content on click

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?

Upvotes: 262

Views: 165142

Answers (30)

Payam Shariati
Payam Shariati

Reputation: 116

Bootstrap 5.3

Bootstrap version 5.3 now has the setContent method to change tooltip title after initialization. https://getbootstrap.com/docs/5.3/components/tooltips/#methods

var tooltip = bootstrap.Tooltip.getInstance('#elementId');
tooltip.setContent({ '.tooltip-inner': 'another title' });

Upvotes: 9

uingtea
uingtea

Reputation: 6524

Do NOT use .tooltip('show') if you have multiple tooltip that dynamically change, see example below, hover all element below for 1 second then mouseout, you will see unexpected result

enter image description here

$('[data-toggle="tooltip"]').tooltip()
$('[data-toggle="tooltip"]').mouseover((e) => {
  let self = $(e.target);
  setTimeout(function() { // ajax call
    self.attr('data-original-title', 'New Value of ' + self.text())
      .tooltip('show');
  }, 3000);
})
span{margin: 20px;font-weight: bold}
<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">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>

<span data-toggle="tooltip" title="Text 1">Text 1</span>
<span data-toggle="tooltip" title="Text 2">Text 2</span>
<span data-toggle="tooltip" title="Text 3">Text 3</span>

the better way is by editing data-original-title and .tooltip-inner

$('[data-toggle="tooltip"]').tooltip()
$('[data-toggle="tooltip"]').mouseover((e) => {
  let self = $(e.target);
  setTimeout(function() { // ajax call
    let newValue = 'New Value of ' + self.text();
    self.attr('data-original-title', newValue)
    $('.tooltip-inner').html(newValue)
  }, 3000);
})
span{margin: 20px;font-weight: bold}
<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">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>

<span data-toggle="tooltip" title="Text 1">Text 1</span>
<span data-toggle="tooltip" title="Text 2">Text 2</span>
<span data-toggle="tooltip" title="Text 3">Text 3</span>

Upvotes: 2

Tabassam Ali
Tabassam Ali

Reputation: 262

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.

Upvotes: 1

hareluya86
hareluya86

Reputation: 181

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();
}

Upvotes: 7

Ihza Ahmad
Ihza Ahmad

Reputation: 51

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

Upvotes: 2

Deepa Rokhade
Deepa Rokhade

Reputation: 611

if you have set the title attribute in HTML then use on click of the icon or button $(this).attr('title',newValue);

Upvotes: 0

Mehmet Duran
Mehmet Duran

Reputation: 4645

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');

Upvotes: 449

OBL
OBL

Reputation: 367

I only tested this in bootstrap 4 & w/o calling .show()

el.tooltip('hide').attr('data-original-title', 'message');

Upvotes: 1

Ivijan Stefan Stipić
Ivijan Stefan Stipić

Reputation: 6668

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.

Upvotes: 21

Adriaan Tijsseling
Adriaan Tijsseling

Reputation: 2015

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');

Upvotes: 122

Sherif Salah
Sherif Salah

Reputation: 2143

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>

Upvotes: 1

Chloe
Chloe

Reputation: 26264

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>

Upvotes: 11

Amine
Amine

Reputation: 9

$(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'.

Upvotes: -1

George
George

Reputation: 73

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');
});

Upvotes: -1

B.Asselin
B.Asselin

Reputation: 988

With Tooltip object Boostrap :

$(element).attr('data-original-title', 'New value');
$(element).data('bs.tooltip').tip().find('.tooltip-inner').text('New value');

Upvotes: 0

Bass
Bass

Reputation: 151

for Bootstrap 4:

$(element).attr("title", "Copied!").tooltip("_fixTitle").tooltip("show").attr("title", "Copy to clipboard").tooltip("_fixTitle");

Upvotes: 15

Martin Lyne
Martin Lyne

Reputation: 3065

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.

Upvotes: 3

Morteza QorbanAlizade
Morteza QorbanAlizade

Reputation: 1550

You can just change the data-original-title using the following code:

$(element).attr('data-original-title', newValue);

Upvotes: 7

omabra
omabra

Reputation: 99

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.

Upvotes: 0

Lucky
Lucky

Reputation: 29

Thanks this code was very helpful for me, i found it effective on my projects

$(element).attr('title', 'message').tooltip('fixTitle').tooltip('show');

Upvotes: 2

empa
empa

Reputation: 81

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.

Upvotes: 8

Alex
Alex

Reputation: 3454

I couldn't get any of the answers working, here's a workaround:

$('#'+$(element).attr('aria-describedby')+' .tooltip-inner').html(newTitle);

Upvotes: 1

BenG
BenG

Reputation: 1766

you can update the tooltip text without actually calling show/hide:

$(myEl)
    .attr('title', newTitle)
    .tooltip('fixTitle')
    .tooltip('setContent')

Upvotes: 15

jerin
jerin

Reputation: 326

Destroy any pre-existing tooltip so we can repopulate with new tooltip content

$(element).tooltip("destroy");    
$(element).tooltip({
    title: message
});

Upvotes: 1

sarfarazsajjad
sarfarazsajjad

Reputation: 1238

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

Upvotes: -1

ndreckshage
ndreckshage

Reputation: 873

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

Upvotes: 12

studio 42 france
studio 42 france

Reputation: 21

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.

Upvotes: 2

Nate
Nate

Reputation: 13242

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 &nbsp 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.&nbsp;&nbsp;': text = 'Saving..&nbsp;'; break;
    case 'Saving..&nbsp;': text = 'Saving...'; break;
    case 'Saving...': text = 'Saving.&nbsp;&nbsp;'; break;
    }
    $('.tooltip-inner', parent).html(text);
}, 250);

send_request( function(){
    // When the request is complete
    clearInterval(interval_id);
    $('.tooltip-inner', parent).html('Done.&nbsp;&nbsp;&nbsp;&nbsp;');
    setTimeout(function() {
        $element.tooltip('hide');
    }, 1500 /* Show "Done." for a bit */);
});

Upvotes: 0

Ren&#233; Fern&#225;ndez
Ren&#233; Fern&#225;ndez

Reputation: 632

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');

    }

Upvotes: 0

aknuds1
aknuds1

Reputation: 67987

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
    });
}

Upvotes: 4

Related Questions