Monkey Raptor

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.