jQuery UI : Tooltip Events
Learn how to use jQuery UI Tooltips Events to create Notification for specific tooltip events.
jQuery UI : Tooltips Events
The jQuery UI Tooltip Widget provides three events in addition to regular events, which can be used to define a callback function to perform different action to be called when a particular event happens.
The table below has list of configurable options which can accept an executable function on an event.
Table : jQuery UI Methods
|close||The event is fired when the tooltip is closed or triggered using events of focusout or mouseleave|
|create||The event is fired when the tooltip is created.|
|open||Event is fired when a tooltip is opened or displayed.It can be triggered using focusin or mouseover events|
jQuery UI Tooltips : Callback Function using Events
jQuery UI Tooltip Widget Events can be used to react when a particular tooltip is displayed using non-binding event techniques as well.
In the demo below, we have used append method to update history of tooltip as the mouse moves over the tooltip. The name of the functions are provided as the values for the properties of open and close.
Example: jQuery UI Tooltip - Callback Function using EventsGive it a TRY! » Note: The two arguments is passed automatically by the jQuery Widget to the call function defined.
jQuery UI Tooltip : Binding Tooltip Events
Table : jQuery UI Tooltip Custom Event Binding
|tooltipcreate||The event is fired a tooltip is created.|
|tooltipopen||The event is fired when the tooltip is displayed.It is triggered using focus and mouseover|
|tooltipclose||Event is fired when a tooltip is opened or displayed.It can be triggered using focusin or mouseover events|
The jQuery Method of on() is used to bind an event handler to a custom event, the event is fired by the tooltip widget is way very similar to binding a standard DOM event, say a click or mouseover
In the demo the event handlers tooltipopen and tooltipclose has an effect same as open and close callback functions.
Example: jQuery UI Tooltip - Binding Tooltip EventsGive it a TRY! » Note: All of the events of the widgets can be used with method on() , just by prefixing the name of widget to the event name.
jQuery UI Tooltip : Form Validations
jQuery UI tooltip Events has a practical application with forms, inorder to reduce errors by providing the user with Hints on how to fill form fields.
In the demo below, the tooltip Events are used to provide an Hint to the user when the mouse pointer moves over form fields