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

Answer 1

Try this

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

Source: github bootstrap issue

Answer 2

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

Answer 3

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>

Answer 4

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.

Answer 5

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>

Answer 6

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