#8718 closed bug (fixed)
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.
Change History (7)
comment:1 Changed 10 years ago by
comment:3 Changed 10 years ago by
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
comment:4 Changed 10 years ago by
Milestone: | 1.10.0 → 1.9.1 |
---|
comment:5 Changed 10 years ago by
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.
comment:6 Changed 10 years ago by
All browsers position below the element. There's already a position
option which gives you full control.
comment:7 Changed 10 years ago by
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/.