Demo of Selection of content for tooltip in JQuery UI

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

jquery

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

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