javascript - jQuery Tools Tooltips does not work simply by an outer div having position: relative? - Stack Overflow

admin管理员组

文章数量:1420907

A third party jQuery tooltip is jQuery Tools Tooltips: ToolTips Done Right. Can it be breaking just by having an outer div with position: relative?

This one works: .html

Just adding a position: relative to the outer div (the one with blue border), and the tooltip gets massively misplaced (by whatever amount the header div pushes down): .html

The quality of 3rd party open-source code.

Does any jQuery guru have a fix quickly? The requirement is that the outer div must have position: relative or position: absolute for one reason or another. I think the reason it is breaking is that jQuery Tools Tooltip uses position: absolute to position the tooltip, but without knowing that the absolute is actually relative to the "nearest ancestor that is positioned", as the CSS spec says. So it breaks, by just a simple case.

A third party jQuery tooltip is jQuery Tools Tooltips: ToolTips Done Right. Can it be breaking just by having an outer div with position: relative?

This one works: http://www.topics2look./code-examples/jquery-tools-tooltip-bug/this-works.html

Just adding a position: relative to the outer div (the one with blue border), and the tooltip gets massively misplaced (by whatever amount the header div pushes down): http://www.topics2look./code-examples/jquery-tools-tooltip-bug/with-relative-position-it-does-not-work.html

The quality of 3rd party open-source code.

Does any jQuery guru have a fix quickly? The requirement is that the outer div must have position: relative or position: absolute for one reason or another. I think the reason it is breaking is that jQuery Tools Tooltip uses position: absolute to position the tooltip, but without knowing that the absolute is actually relative to the "nearest ancestor that is positioned", as the CSS spec says. So it breaks, by just a simple case.

• javascript
• tooltip
• jquery-tools

Share Improve this question Follow edited May 11, 2011 at 7:55 nonopolarity asked May 11, 2011 at 7:44 nonopolaritynonopolarity 152k142142 gold badges492492 silver badges782782 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

Try using the relative property (third from the bottom).

$('#main-content').tooltip({
    bounce: false,
    relative: true, // <-- Adding this should sort you out
    slideOffset: 5,
    effect: 'slide',
    direction: 'down',
    slideInSpeed: 300,
    slideOutSpeed: 200,
    position: 'bottom center'
});

本文标签：