twitter-bootstrap Bootstrap 工具提示在初始悬停时处于错误位置，然后处于正确位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41602487/
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
Bootstrap tooltip in wrong position on initial hover, then in correct position
提问by haydenwagner
I am using the tooltips from the twitter bootstrap on a div on a webpage. The tooltip is initialized, but on the first hover it is in the wrong position; however, on the subsequent hovers the tooltip is in the correct position.
我在网页上的 div 上使用来自 twitter bootstrap 的工具提示。工具提示已初始化，但在第一次悬停时它位于错误的位置；但是，在随后的悬停中，工具提示位于正确的位置。
I think the problem is occurring because the div that the tooltip is attached to is absolutely positioned.
我认为问题的发生是因为工具提示附加到的 div 是绝对定位的。
Here is the div tag in my html:
这是我的 html 中的 div 标签：
<div class="btn-group" id="sample-menu" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
This is how the tooltip is displayed on the first hover:
这是工具提示在第一次悬停时的显示方式：
And here is how it is displayed on every hover after that:
以下是此后每次悬停时的显示方式：
(sizes are not changing just the screenshot crop size)
（大小不会改变只是截图裁剪大小）
The styles applied to the div are:
应用于 div 的样式是：
#sample-menu {
position: absolute;
top: 95px;
right: 608px;
}
I could probably position the div differently to get this to work, I am just wondering why the tooltip seems to work perfectly on the absolutely positioned div, but only after the first hover.
我可能会以不同的方式定位 div 以使其工作，我只是想知道为什么工具提示在绝对定位的 div 上似乎可以完美运行，但仅在第一次悬停之后。
** I added a few more tooltips on divs that aren't absolutely positioned and I have the same problem (first appearance of the tooltip is removed from my element, and then after the first appearance it is correct). I have an svg on the page with elements that are being added and sized with javascript (d3). It seems like I need to call something to reposition the tooltips after all page elements are added/sized, however, none of the Bootstrap Tooltip or Tether repositioning solutions have worked for me.
** 我在不是绝对定位的 div 上添加了更多工具提示，我遇到了同样的问题（工具提示的第一次出现从我的元素中删除，然后在第一次出现后它是正确的）。我在页面上有一个 svg，其中包含使用 javascript (d3) 添加和调整大小的元素。在添加/调整所有页面元素后，我似乎需要调用一些东西来重新定位工具提示，但是，Bootstrap Tooltip 或 Tether 重新定位解决方案都不适用于我。
采纳答案by haydenwagner
Here is a codepen of the original problem
I had made the position of the body 'relative' so that my child elements could be positioned absolutely in the way I wanted, and I also had set the the body's margin to '0 auto' to center the content. These styles interfered with the tooltip container option solution that Eric mentioned in his answer.
我已经将身体的位置设置为“相对”，以便我的子元素可以按照我想要的方式绝对定位，并且我还将身体的边距设置为“0 自动”以将内容居中。这些样式干扰了 Eric 在他的回答中提到的工具提示容器选项解决方案。
/*original css*/
body {
position: relative;
width: 980px;
/*set as important to work in codepen example*/
margin:0 auto !important;
}
#sample-menu{
position: absolute;
top: 109px;
left: 600px;
}
//js that didn't solve tooptip positioning issue
$(function(){
$('[data-toggle="tooltip"]').tooltip({
container: 'body'
});
});
It was bad practice to have that styling applied to the body in the first place. Here is a codepen that solves this problemand still gives me the appearance and behavior I want without the tooltip issues. I added a container around the content to apply the styles, and then the tooltip "container: 'body' " solution that Eric G suggested worked.
首先将这种样式应用于身体是不好的做法。这是一个解决这个问题的代码笔，并且仍然为我提供了我想要的外观和行为，而没有工具提示问题。我在内容周围添加了一个容器以应用样式，然后 Eric G 建议的工具提示“容器：'body'”解决方案起作用了。
/*new css with styling on a container div instead of the body*/
.container {
position: relative;
width: 980px;
margin:0 auto;
}
#sample-menu{
position: absolute;
top: 109px;
left: 600px;
}
//js now fixes the tooltip positioning issue
$(function(){
$('[data-toggle="tooltip"]').tooltip({
container: 'body'
});
});
回答by Eric G
The below has worked for me in the past for tool tips involving absolute positioning:
以下内容在过去对我有用，用于涉及绝对定位的工具提示：
$('[data-toggle="tooltip"]').tooltip({
container: 'body'
});
I just trigger this script after everything is done rendering on the page and everything is set fine. Also in areas where there is an update to the tool tip I have to run this again.
我只是在页面上的所有渲染完成后触发这个脚本，并且一切都设置得很好。同样在工具提示有更新的区域，我必须再次运行它。
回答by Andrew Evt
You can also specify other containers (not only 'body') in tooltip config.
您还可以'body'在工具提示配置中指定其他容器（不仅）。
I had project with HTML like this:
我有这样的 HTML 项目：
<body>
<div class='wrapper'>
...
<div>
<p>Test message with tooltip <span class="tooltip-icon"
data-toggle="tooltip"
data-placement="right"
title="Tooltip test">?</span></p>
</div>
...
</div>
</body>
and have issues with tooltip positioning calculation, using this JS:
并且在工具提示定位计算方面有问题，使用这个 JS：
$('[data-toggle="tooltip"]').tooltip({
container: 'body'
});
As I understood, issue was caused by margin: 0style of bodyelement.
据我了解，问题是由元素margin: 0样式引起的body。
Trying to fix this problem without changing styles of bodyelement and default markup, I've used other container, like this:
尝试在不更改body元素样式和默认标记的情况下解决此问题，我使用了其他容器，如下所示：
$('[data-toggle="tooltip"]').tooltip({
container: '.wrapper'
});
and all worked perfectly without any changes.
并且一切正常，没有任何变化。
From bootstrap documentation:
来自引导程序文档：
https://getbootstrap.com/docs/4.3/components/tooltips/#options
https://getbootstrap.com/docs/4.3/components/tooltips/#options
name: container
values: string | element | false
default: false
descr.: Appends the tooltip to a specific element. Example: container: 'body'. This option is particularly useful in that it allows you to position the tooltip in the flow of the document near the triggering element - which will prevent the tooltip from floating away from the triggering element during a window resize.
If you'll check bootstrap's tooltip.js, you'll see, that if you set containervalue as a string, it'll try to find element with given selector in DOM (see _proto._getContainer() method)
如果您检查 bootstrap 的 tooltip.js，您会看到，如果您将containervalue设置为字符串，它会尝试在 DOM 中查找具有给定选择器的元素（请参阅参考资料_proto._getContainer() method）
回答by rafal chlopek
Here is cool fix: instead of using default Bootstrap's tooltips you assign only custom data-hint:
这是一个很酷的修复：而不是使用默认的 Bootstrap 工具提示，您只分配自定义数据提示：
<button type="button" class="btn" data-hint="Add new column">
and after EVERY change in the DOM you run this function:
在 DOM 中的每次更改之后，您都会运行此函数：
function _createTooltips(block) {
block.find('[data-hint]:visible').each(function(index) {
h = $(this).data('hint')
$(this).data('toggle' , 'tooltip')
$(this).data('placement', 'bottom')
$(this).data('title', h)
$(this).tooltip()
});
}
where blockis any parent containing newly added elements containing hints. Easy and efficient. Also makes HTML shorter :-)
其中block是包含新添加的包含提示的元素的任何父元素。简单高效。也使 HTML 更短:-)
回答by Julesezaar
I had the same issue with Bootstrap 4 and since the other answers here did not work for me (those with container: 'body'), I fixed it for the moment by initializing it only on the first mousenter. (after that the attribute "data-original-title" will exist)
我在 Bootstrap 4 上遇到了同样的问题，因为这里的其他答案对我不起作用（那些带有容器的答案：'body'），我暂时通过仅在第一个 mouseenter 上初始化它来修复它。（之后属性“data-original-title”将存在）
An extra good thing with this code is that the tooltip will work for every new item on the page that is not part of the DOM yet. That is because we start from $(document).on('mouseenter', ...)
这段代码的一个额外好处是工具提示将适用于页面上还不是 DOM 一部分的每个新项目。那是因为我们从 $(document).on('mouseenter', ...)
/**
* This code will execute only once when hovering the first time (mouseenter).
* Then we close it and open it again for fixing wrong placement.
* (It happens without noticing it)
*/
$(document).on('mouseenter', '[data-toggle="tooltip"]:not([data-original-title])', function() {
$(this)
.tooltip()
.tooltip('show')
/**
* Fix for wrong placement when Bootstrap's tooltip open the first time
*/
.tooltip('hide')
.tooltip('show')
;
});
