jQuery UI 工具提示定位问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16838933/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery UI tooltip positioning issue
提问by Amy
I have a positioning issue with jQuery UI's tooltips. I would prefer to not use jQuery UI, but the project I'm working on already uses it throughout and it's been requested I try and make use of it, rather than integrating my preferred option, qTip2.
我有 jQuery UI 工具提示的定位问题。我宁愿不使用 jQuery UI，但我正在处理的项目已经在整个过程中使用它，并且有人要求我尝试使用它，而不是集成我的首选选项 qTip2。
When the tooltip appears, it causes a vertical scrollbar. I am positioning the tooltip centrally above the target and it's as I want it, excluding this issue.
当工具提示出现时，它会导致一个垂直滚动条。我将工具提示定位在目标上方的中央，这是我想要的，不包括这个问题。
$(function() {
$( document ).tooltip({
show: false,
hide: false,
position: {
my: "center bottom-20",
at: "center top",
using: function( position, feedback ) {
$( this ).css( position );
$( "<div>" )
.addClass( "arrow" )
.addClass( feedback.vertical )
.addClass( feedback.horizontal )
.appendTo( this );
}
}
});
});
I can see that the tooltip is being positioned at top:-600px which I assume is what is causing the scrollbar to appear.
我可以看到工具提示位于 top:-600px ，我认为这是导致滚动条出现的原因。
I've tried changing / removing the positioning of the tooltip, but it didn't have any effect. I have tried removing parts of the CSS to pinpoint the problem and it seems related to the padding (any) or height (min, max or fixed).
我试过更改/删除工具提示的位置，但没有任何效果。我尝试删除部分 CSS 以查明问题，它似乎与填充（任何）或高度（最小、最大或固定）有关。
Although removing padding and height fixes the issue, it obviously leaves the tooltip looking a bit ... Skinny. I would like to work out what the problem is and a way around it, so I can style the tooltip.
虽然删除填充和高度解决了这个问题，但它显然让工具提示看起来有点……瘦。我想弄清楚问题是什么以及解决它的方法，以便我可以设置工具提示的样式。
My current CSS (including the height and padding which I can see causes the issue) is as follows (there are also styles set for the arrows, which I've omitted as I can see they're not causing any problems):
我当前的 CSS（包括我可以看到导致问题的高度和内边距）如下（还有为箭头设置的样式，我已将其省略，因为我可以看到它们没有引起任何问题）：
.ui-tooltip {
z-index:10;
width:150px;
padding:10px;
min-height:20px;
max-width:100%;
font-size:0.875em;
text-align:center;
border-radius: 20px;
color:#707070;
background:#fffdc2 url(../img/fade.png) repeat-x;
font-family: 'Droid Sans', sans-serif;
text-shadow: 1px 1px #ffffff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border:1px solid #e1e0aa;}
I know jQuery UI have an open issue about connectors, so I've tested it without any positioning settings and it made no difference to this.
我知道 jQuery UI 有一个关于连接器的未决问题，所以我在没有任何定位设置的情况下对其进行了测试，对此没有任何区别。
I have seen this issuementioned a few times, but it wasn't relevant as I do not have qTip, or anything else included.
我已经多次看到这个问题，但它并不相关，因为我没有 qTip 或其他任何内容。
I've set up a JS fiddle here.
I'd appreciate any help or advice.
我很感激任何帮助或建议。
Thanks!
谢谢！
回答by gkalpak
If I understand correctly what you describe as the problem, the vertical scrollbar is added because an extra div("#ui-tooltip-XX") is appended to the document's body with position: relative, which takes up extra space increasing the body's scrollHeightproperty (and causing the scrollbar to appear).
If this is "compatible" with the rest of your HTML (which I don't have in my disposal to test), you can circumvent this issue by setting the tooltip's positionattribute to absolute(which does not contribute to its container's overall height.
如果我正确理解您所描述的问题，则会添加垂直滚动条，因为附加的div("#ui-tooltip-XX") 附加到文档正文中position: relative，这会占用额外的空间，增加正文的scrollHeight属性（并导致滚动条出现）。如果这与您的 HTML 的其余部分“兼容”（我无法进行测试），您可以通过将工具提示的position属性设置为absolute（这对其容器的整体高度没有贡献）来规避此问题。
// Add this in your CSS
.ui-tooltip, .arrow:after {
position: absolute;
....
(Based on the rest of the HTML on your page, additonal modifications might be necessary.)
（根据页面上的其余 HTML，可能需要进行额外的修改。）
See, also, this short demo.
另请参阅此简短演示。
回答by John - Not A Number
For my app (which has tooltips in cells in a jQuery DataTable within nested jQuery Tabs), just setting 'position: absolute' wasn't enough - I also had to give the tooltips an initial onscreen top and left position as it only gets positioned after creation:
对于我的应用程序（在嵌套的 jQuery 标签中的 jQuery DataTable 的单元格中有工具提示），仅设置“位置：绝对”是不够的 - 我还必须给工具提示一个初始的屏幕顶部和左侧位置，因为它只会被定位创建后：
.ui-tooltip
{
position: absolute;
top: 100px; left: 100px;
}
