How to update Bootstrap 3 tooltip text on each hover?

Question

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 1

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

Answer 2

You may use data-original-title attribute on show.bs.tooltip event:

var errorVariable = Date.now() % 100;

$(function () {
  $('[data-toggle="errortip"]').tooltip({
    trigger : 'hover',
    title: errorVariable
  }).on('show.bs.tooltip', function(e) {
    $(this).attr('data-original-title', errorVariable);
  });

  $('#myBtn').on('click', function(e) {
    errorVariable = Date.now() % 100;
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<button type="button" class="btn-default btn-sm" id="myBtn">Click Me to create a random tooltip message</button>
<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>