Giallo Giallo - 11 months ago 54
Javascript Question

How to update Bootstrap 3 tooltip text on each hover?

I'd like to just simply update the tooltip each time on hover before display. I have a warning icon that pops up if there's been an error, and on hover I'd like the most recent error to show up. What I have doesn't work, though.

HTML Snippet

<div id="title">App</div>
<button id="warningbtn" type="button" class="btn-default btn-sm"
data-toggle="errortip" data-placement="right" title="">
<span class="glyphicon glyphicon-warning-sign"></span>
</button>


JavaScript/JQuery:

function start(){
let result = addon.start();
if (result == -1){
recentError = "Your license is invalid.";
}
}

$(document).ready(function(){

$('[data-toggle="errortip"]').tooltip({
trigger : 'hover',
title: errorVariable
});


Start is called from a simple start button on the page. recentError is declared at the top of the .js file.

Thanks for the help!

Answer Source

You can set this attribute whenever you will need a new value for the tooltip:

$('#warningbtn').attr('data-original-title','something else');

There is an issue reported here, and it seems to be a problem with setting the tooltip title dynamically https://github.com/twbs/bootstrap/issues/14769