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!

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!

• javascript
• jquery
• twitter-bootstrap

4 Answers 4

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./twbs/bootstrap/issues/14769

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./bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery./jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./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>

Try this

$('#warningbtn').on('show.bs.tooltip', function() {
    $('#warningbtn').tooltip({
      title: errorVariable
    })
});

You can use following code. I have updated according to your requirement. :

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

	$(document).ready(function() {

		$('[data-toggle="errortip"]').tooltip({

			title : recentError
		});
	});
	start();

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.js"></script>
<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>