Monkey Raptor

Tuesday, December 23, 2014

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

#2 Remove the transition on tooltip (to make it faster, kinda)
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.


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


Note:
The 3rd 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.
jQuery UI: How to Close (Every) Tooltip Widget on Click
https://monkeyraptor.johanpaul.net/2014/12/jquery-ui-how-to-close-every-tooltip.html

No comments

Post a Comment

Tell me what you think...