Reset tooltip on close
http://stackoverflow.com/questions/16573587/reset-tooltip-on-close
HTML
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-darkness/jquery-ui.css">
<div class="content">
<div class="rounded_corners" title="hello">
test
</div>
</div>
JavaScript
var $selector = $('div.rounded_corners'),
$timeout;
function fnAddToolTip()
{
$selector.tooltip({
open: function(event, ui)
{
// test this with a timeout to find out what will happen if I use AJAX to bring in the content
$timeout = setTimeout(function()
{
// replaces the loading image with this text, but changes the content for all tooltips, which is undesirable
$selector.tooltip('option', 'content', 'sometimes you just have to wait a second');
}, 0);
},
close: function()
{
// reset the content back to the loading image
$selector.tooltip('close').tooltip('destroy').attr('title','hello');
clearTimeout($timeout);
fnAddToolTip();
// adding return true doesn't have any effect on if the tooltip closes or not
//return true;
}
});
}
fnAddToolTip();