Can't change bootstrap Tooltip title

Question

I've already looked over several posts on stack overflow asking virtually the exact same question yet none of what I found on those questions has helped. I'm very new to JQuery and Bootstrap so maybe I'm just missing some really simple thing.

I want to be able to to change the title of the tooltip on different elements after the first initialization(ideally multiple times after initialization.) A simplified version of what I'm dealing with:

<canvas id="bag0"  data-toggle="tooltip" title="test">
</canvas>
...
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

$(document).ready(function(){
            $('#bag0').data('tooltip',false)          
                  .tooltip({ title: 'new text'});
            $('[data-toggle="tooltip"]').tooltip();

});

This method to change the title was given from posting: How to overwrite twitter bootstrap tooltip?

The tooltip always reads "test." I've tinkered with a few others things to no avail. I suspect I'm overlooking something obvious.

From the link you have mentioned, that answer states the in bootstrap v3 it uses data('bs.tooltip') not data('tooltip'). — Help, Dec 31 '15 at 04:31
Oh yeah, i did try that and it didn't work(just tried it again.) Forgot to change that in the post. — Khaines0625, Dec 31 '15 at 04:35
`$(#bag0').tooltip('destroy').tooltip({title:"new text"})`. How about this? — R Lam, Dec 31 '15 at 04:39
@RLam `Uncaught TypeError: No method named "destroy"` https://getbootstrap.com/docs/4.1/components/tooltips/#methods, but `dispose` worked. `$('#topic_1').tooltip('dispose').tooltip({title: 'Goodbye'}).tooltip('show')`. — Chloe, Sep 13 '18 at 19:43

score 25 · Answer 1 · edited Dec 31 '15 at 04:52

25

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

Above code might help you.

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

You can use the element id or class to make it more specific.

Help :)

edited Dec 31 '15 at 04:52

LOTUSMS

10,317
15
71
140

answered Dec 31 '15 at 04:37

Help

1,156
7
11

2

`fixTitle` is not one of the valid listed parameters. https://getbootstrap.com/docs/4.1/components/tooltips/#methods `Uncaught TypeError: No method named "fixTitle"` – Chloe Sep 13 '18 at 19:37
1

I had the same error as @Chloe in Bootstrap 4; I had to change "fixTitle" to "_fixTitle" to get it to work. – TimP Sep 05 '19 at 10:30
@TimP See below answer for Bootstrap 4. https://stackoverflow.com/a/52320836/148844 – Chloe Sep 06 '19 at 02:01

score 11 · Answer 2 · answered Sep 21 '17 at 13:31

11

Try this

$(element).tooltip().attr('data-original-title', "new title");

Source: github bootstrap issue

answered Sep 21 '17 at 13:31

Lucas Alencar

350
2
11

score 7 · Answer 3 · edited Jun 20 '20 at 09:12

Bootstrap 4

$('#topic_1').tooltip('dispose').tooltip({title: 'Goodbye'}).tooltip('show')

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

Vishal · Answer 4 · 2019-10-28T16:06:00.957

Change Bootstrap 4 Tooltip title

$(document).ready(function() {
  // initilizing Tooltip
  $('[data-toggle="tooltip"]').tooltip();

  // Get the Tooltip
  let btn_tooltip = $('#my-btn');

  // Change Tooltip Text on mouse enter
  btn_tooltip.mouseenter(function () {
    btn_tooltip.attr('title', 'Default Tooltip').tooltip('dispose');
    btn_tooltip.tooltip('show');
  });

  // Update Tooltip Text on click
  btn_tooltip.click(function () {
    btn_tooltip.attr('title', 'Modified Tooltip').tooltip('dispose');
    btn_tooltip.tooltip('show');
  });
});

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <p>Click the button:</p>
  <button id="my-btn" type="button" class="btn btn-primary" data-toggle="tooltip" title="Default tooltip">Click Me</button>
</div>

</body>
</html>

Hemal · Accepted Answer · 2015-12-31T04:36:19.897

1

This might help

$('[data-toggle="tooltip"]').attr("title","NEW TEXT");

If you want to for a particular element, say a <div>

$('div[data-toggle="tooltip"]').attr("title","NEW TEXT");

edited Dec 31 '15 at 04:36

answered Dec 31 '15 at 04:30

Hemal

3,682
1
23
54

That did, in fact, change the tooltip that is displayed. However, won't that change all instances of tooltip on all elements on the page? I plan on having many tooltips and want to change them individually. – Khaines0625 Dec 31 '15 at 04:32
Just put the element in selector you want to change `$('YOUR_DIV[data-toggle="tooltip"]').attr("title","NEW TEXT");` – Hemal Dec 31 '15 at 04:34
1

This doesn't change the tooltip title if the tooltip has already been created. You need to call `.tooltip('fixTitle')` after setting the new title for it to take effect, as shown by @help below. – Uncle Arnie Oct 17 '17 at 10:40
1

@UncleArnie `fixTitle` is not valid. `Uncaught TypeError: No method named "fixTitle"` https://getbootstrap.com/docs/4.1/components/tooltips/#methods – Chloe Sep 13 '18 at 19:41
@Chloe This only applies to bootstrap v3. – Uncle Arnie Nov 08 '18 at 15:37

score 1 · Answer 6 · edited Oct 10 '19 at 10:11

Try following,

$(document).ready(function(){
            $('#bag0').attr('title', 'new text')
                  .tooltip('destroy') // if you are using BS4 use .tooltip('dispose')
                  .tooltip({ title: 'new text'});
            $('[data-toggle="tooltip"]').tooltip('show');

});

<canvas id="bag0"  data-toggle="tooltip" title="test">
</canvas>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

score 1 · Answer 7 · answered Sep 08 '21 at 03:20

I have a solution for similiar case. 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()

score 0 · Answer 8 · answered May 20 '19 at 03:17

0

I may be a bit too late but my solution to this was to change the data-original-title

$('.sample').attr('data-original-title': 'new title');

This changes the bootstrap tool tip title automatically.

answered May 20 '19 at 03:17

LEAD IT

65
2
8

Can't change bootstrap Tooltip title

8 Answers8

Bootstrap 4

Linked

Related