jQuery UI: How to Close (Every) Tooltip Widget on Click

This works only for desktop view

Let's GO

This method we "discovered" will initialize the jQuery UI tooltip widget on every single element which has the attribute [title] and then close the widget on click event.
As you've known already, jQuery UI tooltip widget is developed to enhance the title display of an HTML element.

---

Before we look at the snippets

Comments in JavaScript:

• // This is a comment line. It starts with (//).
• /* This is a comment block.
     It can consist of multiple lines. */

---

Snippets

#1 Basic $( "[title]" ).tooltip().click( function () { $( this ).tooltip( "close" ); }); // That will initialize the tooltip, and if any of // them is clicked, the tooltip will be closed.

#2 Remove the transition on tooltip (to make it faster, kinda) $( "[title]" ).tooltip({ show: false, hide: false }).click( function () { $( this ).tooltip( "close" ); }); /* ||=========================================================================|| || That will initialize the jQuery UI tooltip widget (without transition). || || And also, the tooltip will be closed on click event on single element || || which has [title] attribute. || ||=========================================================================|| */

The #1 and #2 methods will close the tooltip widget, but then, the default display of [title] attribute will be displayed afterward. To compensate that, let's go to snippet #3.

#3 Initialize, remove the transition on tooltip, empty the [title] attribute, and then re-add that on mouseout or blur event. /*\ |*|==============================================================================|*| |*| remove title on click then add the title again on [mouseout] or [blur] event |*| |*|==============================================================================|*| \*/ // the received argument of parameter [$a] is $(this) (of an element w/ [title]) function remove_title( $a ) { var title = $a.attr( "title" ); // get content of [title] attribute // the cache is using new [data-o-t] attribute $a.attr( "data-o-t", title ); // inject new [data-o-t] attribute $a.attr( "title", "" ); // empty [title] attribute content $a.bind( "mouseout blur", function () { // [mouseout] or [blur] event var stored = $a.attr( "data-o-t" ); // get the content of [data-o-t] $a.attr( "title", stored ); // inject stored content of [title] }); } /*\ |*|==========================================================|*| |*| jQUery UI tooltip initialization and click event handler |*| |*|==========================================================|*| \*/ $(function () { // method anonymous wrapper (optional) $( "[title]" ).tooltip({ show: false, hide: false}).click( function (){ $(this).tooltip( "close" ); // close tooltip remove_title( $(this) ); // invoke [remove_title] function above }); });

---

Where's the demo?
This blog is using jQuery UI with customized tooltip (the 3^rd snippet, for desktop view). You can try it out here. Such as the empty-action button below.

---

Note:
The 3^rd method didn't work for a[target='_blank'] element. Because of the window (tab) switching.

Probably you can add something else for that particular element.