Skip to main content

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 tj.vantoll comment:1

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

Changed October 23, 2012 02:29PM UTC by bolerao comment:2

Thanks!

Changed October 23, 2012 02:33PM UTC by Scott González comment:3

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

Changed October 23, 2012 02:33PM UTC by scottgonzalez comment:4

milestone: 1.10.01.9.1

Changed October 23, 2012 02:47PM UTC by bolerao 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 scottgonzalez 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 bolerao 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" } });