tooltip flickers when too long

[bolerao]

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.

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

[bolerao]

Thanks!

[Scott González]

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

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

[Scott González]

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

[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" } });