Skip to main content

Search and Top Navigation

#8782 reopened feature ()

Opened November 06, 2012 09:13PM UTC

Last modified August 12, 2020 02:44PM UTC

Tooltip: no way to keep content open on hover.

Reported by: dsargent@gmail.com Owned by:
Priority: minor Milestone: none
Component: ui.tooltip Version: 1.9.1
Keywords: Cc:
Blocked by: Blocking:
Description

As far as I can tell, there is no way to keep a tooltip open when you change focus from the tooltip parent object to the tootlip itself.

Scenarios where you'd need the user to interact with data in the tooltip are; a google map such as the one in the jQuery UI examples, or a link you want them to be able to click.

In my case, it's a link I want the user to be able to click.

If I hover over the image that creates the tooltip, then try to click on the link, the tooltip closes before I can.

Most of the other tooltips I've looked at stay open when the mouse is over the tooltip window.

This is also an accessibility bug as anyone using a screen magnifier will move the mouse pointer over the tooltip to read it, in this case that is not possible.

I don't know if this is a bug or a feature request as I'm not sure if the original design document called for it or not.

For now it means we have to switch back to jQuery Tools tooltip until this is implemented, which makes me sad.

I did ask on the Forum if anyone knew how to work around this and haven't received a response.

http://forum.jquery.com/topic/how-to-make-a-jquery-ui-1-9-1-tooltip-stay-open-so-a-link-in-it-can-be-clicked

Attachments (0)
Change History (15)

Changed November 06, 2012 09:24PM UTC by scottgonzalez comment:1

resolution: → wontfix
status: newclosed
type: bugfeature

This is definitely a feature. I'm really skeptical of the accessibility claim, since this is the behavior of all native tooltips. I understand what you're saying, but if your tooltip content is that large or interactive, perhaps it's not a tooltip. I'm happy to continue this discussion, but I'm going to close this as won't fix unless a very strong argument can be made for changing the behavior.

Changed November 06, 2012 09:30PM UTC by scottgonzalez comment:2

if your tooltip content is that large or interactive, perhaps it's not a tooltip

Having said that, we should probably change our demos...

Changed November 06, 2012 09:50PM UTC by dsargent@gmail.com comment:3

If your purpose for creating the jQuery UI tooltip is to exactly replicate a native tooltip then your logic is flawless.

But if it is to extend what can be done with tooltips, like this for example:

http://jqueryui.com/tooltip/#custom-content

Then I feel you are incorrect.

If the former is true then that demo should be removed.

If the latter is true then you should really consider implementing something like this:

http://jquerytools.org/demos/tooltip/any-html.html

Many other tooltips have onclick options that will leave the tooltip open (for example) qTip, etc.

For now we will switch to using the one in jQuery Tools, I was trying to avoid that as I really don't much care for jQueyr Tools and was trying to get rid of it. Unfortunately this new project is going live on Monday and it just doesn't look like jQuery UI tooltips are mature enough at this time.

As for the accessibility "claim", it's not a "claim" I know this because I have very poor vision and use a screen magnifier every day, all day, and any elements that disappear like this are beyond frustrating.

Hope this helps.

Changed November 06, 2012 09:57PM UTC by dsargent@gmail.com comment:4

OK, so I'm getting the feeling that the purpose of UI tooltip was to be a very lightweight modifier of native tooltips only. This is counter to many other "heavier" tooltip plugins out there.

In this case I'd recommend that the docs and examples be retooled to let users know the intent of the tooltip widget so they don't waste allot of their and your time trying to do things with it that it was not intended to be used for. There are already plenty of great tooltips available, we where just hoping to not have to use yet more plugins.

I'm going to go ahead and add one more feature request in a separate ticket though, one I feel important for even a lightweight tooltip such as this.

Changed January 04, 2013 07:18PM UTC by scottgonzalez comment:5

resolution: wontfix
status: closedreopened

Reopening for consideration.

Changed January 04, 2013 07:19PM UTC by scottgonzalez comment:6

#8948 is a duplicate of this ticket.

Changed January 04, 2013 07:39PM UTC by gi1242 comment:7

Sorry. I didn't realize I could post on closed tickets when I opened the duplicate.

Bottom line: a minimal plugin implementing the above is here: https://github.com/gi1242/jQuery.pTooltip

A demo is here: http://jsfiddle.net/BgDxs/2/

It would be nice if the user could interact with elements in the tooltip (e.g. links, maps).

Also, user can cut and paste with tool tips if they can hover over.

(I think) my plugin above is somewhat unobtrusive, and does what the user would expect. It would be nice if this was made a feature...

Changed January 25, 2013 09:23PM UTC by tj.vantoll comment:8

milestone: 1.10.0none

Changed March 11, 2013 06:51PM UTC by TeddyYueh comment:9

Here's a workaround that works for me: http://forum.jquery.com/topic/ui-tooltip-how-to-keep-it-visible

Since I invoke 'tooltip(...)' on each element I want to add a tooltip for, the selector changed to be the tooltip trigger. However, there is a flicker when hovering on the trigger from the tooltip again since trigger reloads the tooltip.

But in theory, you can determine whether the mouse is on the trigger element again and not close the existing tooltip until the new one is open.

Changed March 12, 2013 06:46PM UTC by smily03 comment:10

I was able to get this working seamlessly in our environment (no flickers, etc.); however, it required a couple of baseline modifications to the jqueryui code.

http://pastebin.com/wmyzuXJE

Changed May 11, 2013 09:07AM UTC by do-m-en comment:11

Here is another implementation that only adds the hover functionality before calling jQuery UI Tooltip open and close functions and leaves all Tooltip code in tact.

https://github.com/do-m-en/jquery-ui-mouse-over-tooltip

Changed May 17, 2013 10:24AM UTC by ka3yc comment:12

_comment0: a small modification of a tj.vantoll's demo: \ jquery-ui tooltip with AJAX-loaded content and stay visible on hover \ http://jsfiddle.net/BgDxs/32/1368786316334621

a small modification of a gi1242's demo:

jquery-ui tooltip with AJAX-loaded content and stay visible on hover

http://jsfiddle.net/BgDxs/32/

Changed June 03, 2013 03:26PM UTC by deerchao comment:13

This is the best work around I find for now: http://stackoverflow.com/a/15014759/119561

Changed January 31, 2015 04:02AM UTC by scottgonzalez comment:14

#10925 is a duplicate of this ticket.

Changed March 14, 2016 01:59PM UTC by scottgonzalez comment:15

#14934 is a duplicate of this ticket.