jQuery tooltip flickers on links when position is specified

Question

When I add a tooltip to a normal link, and specify the position (any position), the tooltip will only show if the mouse is hovered exactly over the text. If I don't specify a position, it works all hunky dory.

This is incredibly disheartening, considering this is basic functionality.

I've replicated this in jsfiddle: http://jsfiddle.net/6EZHZ/65/

It's also worth mentioning that the given example in documentation works:

$( ".selector" ).tooltip({ 
    position: { my: "left+15 center", at: "right center" } 
});

Why is this happening? Is there a good solution that's not an ugly hack?

Answer 1

Use this code:

.tip {
    background-color: white;
    display:block;
}

By default, when you hover over the letters - and by letters, I mean the actual letters, not the in-between space - only then is the effect started. When you set the display to be block property it treats it as a rectangle covering the inner letters. So that even if you hover over the inner in-between spaces it activates the 'block'.