Opened 6 years ago

Last modified 3 years ago

#8782 reopened feature

Tooltip: no way to keep content open on hover.

Reported by: dsargent@… 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

Change History (15)

comment:1 Changed 6 years ago by Scott González

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.

comment:2 Changed 6 years ago by Scott González

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

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

comment:3 Changed 6 years ago by dsargent@…

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.

comment:4 Changed 6 years ago by dsargent@…

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.

comment:5 Changed 6 years ago by Scott González

Resolution: wontfix
Status: closedreopened

Reopening for consideration.

comment:6 Changed 6 years ago by Scott González

#8948 is a duplicate of this ticket.

comment:7 Changed 6 years ago by gi1242

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...

comment:8 Changed 6 years ago by tj.vantoll

Milestone: 1.10.0none

comment:9 Changed 6 years ago by TeddyYueh

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.

comment:10 Changed 6 years ago by smily03

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

comment:11 Changed 6 years ago by do-m-en

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

comment:12 Changed 6 years ago by ka3yc

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/

Last edited 6 years ago by ka3yc (previous) (diff)

comment:13 Changed 6 years ago by deerchao

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

comment:14 Changed 4 years ago by Scott González

#10925 is a duplicate of this ticket.

comment:15 Changed 3 years ago by Scott González

#14934 is a duplicate of this ticket.

Note: See TracTickets for help on using tickets.