Opened 7 years ago

Closed 7 years ago

Last modified 7 years ago

#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 7 years ago by tj.vantoll

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

comment:2 Changed 7 years ago by bolerao

Thanks!

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

Resolution: fixed
Status: newclosed

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 7 years ago by Scott González

Milestone: 1.10.01.9.1

comment:5 Changed 7 years ago by bolerao

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 7 years ago by Scott González

All browsers position below the element. There's already a position option which gives you full control.

comment:7 Changed 7 years ago by bolerao

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" } });
Note: See TracTickets for help on using tickets.