Search and Top Navigation
#8718 closed bug (fixed)
Opened October 23, 2012 01:30PM UTC
Closed October 23, 2012 02:33PM UTC
Last modified October 23, 2012 05:53PM UTC
tooltip flickers when too long
Reported by: | bolerao | Owned by: | |
---|---|---|---|
Priority: | minor | Milestone: | 1.9.1 |
Component: | ui.tooltip | Version: | 1.9.0 |
Keywords: | Cc: | ||
Blocked by: | Blocking: |
Description
I cannot use jsfiddle for an example as it doesn't provide a fresh JQuery UI.
Reproduction: create a tooltip that is so long that it either spans from the left edge to the right edge of the window or at least reaches the right edge of the window. e.g.
<script> $(function() { $(document).tooltip(); }); </script> <input type="text" name="whatever" size="15" maxlength="40" value="" title="A very very very very very long text here. A very very very very very long text here. A very very very very very long text here. A very very very very very long text here. A very very very very very long text here. A very very very very very long text here." />
What happens:
IE8: tooltip flickers continuously when hovered over it.
Firefox: tooltip flickers once when hovered over it.
IE9: tooltip flickers once and then disappears
Ah, wait, I think I have now found the reason. It happens when the tooltip is so large that it reaches the right edge and then expands to the left so much that it is under the mouse. In that case it seems to break/intercept the hovering and depending on browser implementation it flickers more or less.
I think the widget should work in such a way that it automatically adjusts in size when it is forced to span over the original hover event area/element. One should also be able to give it a maximum horizontal/vertical size. That may be possible with CSS (I'll try that), but I think it might be helpful to have maxwidth and maxheight options for it.
Attachments (0)
Change History (7)
Changed October 23, 2012 01:45PM UTC by comment:1
Changed October 23, 2012 02:29PM UTC by comment:2
Thanks!
Changed October 23, 2012 02:33PM UTC by comment:3
resolution: | → fixed |
---|---|
status: | new → closed |
Tooltip: Position below the element and set a max width of 300px to more closely match native tooltip behavior. Fixes #8718 - tooltip flickers when too long.
Changeset: 7af1ec727bcca8367e804cea77b9dd238b1c0d69
Changed October 23, 2012 02:33PM UTC by comment:4
milestone: | 1.10.0 → 1.9.1 |
---|
Changed October 23, 2012 02:47PM UTC by comment:5
Thanks for the quick reaction. Wouldn't it be rather better to place the tip above the element or give an option to place it (left|top|right|down) ?
I think I would certainly expect it to appear above the mouse/element as this is what most other tooltip-like implementations do (I think).
Although, comparing with native tooltip behavior I see that native Windows tooltips appear below.
Changed October 23, 2012 02:54PM UTC by comment:6
All browsers position below the element. There's already a position
option which gives you full control.
Changed October 23, 2012 05:53PM UTC by comment:7
Thanks for the info. I'm finding the position option to work rather counter-intuitive. After trying some time I've come up with this incatation which will place the tooltip slightly above the element and positioned to the right. Maybe it helps someone else.
$(document).tooltip({ position: { my: "left bottom", at: "left+100 top-10", collision: "none" } });
Both 1.9.0 and the latest code from the Git repository are available on jQuery's CDN. Here's a fiddle - http://jsfiddle.net/tj_vantoll/euzBy/.