Search within TutorialsPark

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

Events Description
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 Events

Give 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

Events Description
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 Events

Give 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

Example: jQuery UI Menu Tracking Mouse Movements

Give it a TRY! » Note: With Some validation scripts you can even notify the user .