Demo of Selection of hide option for tooltip in JQuery UI






Select above radio buttons to apply different hide options to tooltip, then place the mouse over input box to display tooltip and then move out to hide with ( selected ) animation effect
You can see a Demo & list of such animation effects here.

jquery

<script>
$(document).ready(function() {
////////////////
$( "#my_tooltip" ).tooltip({
hide: false
});
///////////////
var present_class = $( "#my_tooltip" ).tooltip( "option", "hide" );
$('#d1').html( " <b>Status of hide:</b> " + present_class );
//////////
$("input:radio[name=r1]").click(function() {
var sel = ($(this).val() == 'true');
$( "#my_tooltip" ).tooltip( "option", "hide", sel );
var present_class = $( "#my_tooltip" ).tooltip( "option", "hide" );
$('#d1').html( " <b>Status of hide:</b> " + present_class );
})
////////////
})
</script>