Demo of Selection of Classes for tooltip in JQuery UI

Select above radio buttons to apply different classes to tooltip then place the mouse over input box to display tooltip ( with different classes)

jquery

<script>
$(document).ready(function() {
////////////////
$( "#my_tooltip" ).tooltip({

classes: {
  "ui-tooltip": "ui-state-highlight",
    }
});
///////////////
var present_class = $( "#my_tooltip" ).tooltip( "option", "classes.ui-tooltip" );
$('#d1').html( " <b>Status of classes    :  </b>: " + present_class );
//////////
$("input:radio[name=r1]").click(function() {
var sel=$(this).val()
$( "#my_tooltip" ).tooltip( "option", "classes.ui-tooltip", sel );
var present_class = $( "#my_tooltip" ).tooltip( "option", "classes.ui-tooltip" );
$('#d1').html( " <b>Status of classes    :  </b>: " + present_class );
})
////////////
})
</script>