Bootstrap 工具提示在初始悬停时处于错误位置，然后处于正确位置

Question

我在网页上的 div 上使用来自 twitter bootstrap 的工具提示。工具提示已初始化，但在第一次悬停时它位于错误的位置；但是，在随后的悬停中，工具提示位于正确的位置。

我认为问题的发生是因为工具提示附加到的 div 是绝对定位的。

这是我的 html 中的 div 标签：

 <div class="btn-group" id="sample-menu" data-toggle="tooltip" data-placement="left" title="Tooltip on left">

这是工具提示在第一次悬停时的显示方式：

以下是此后每次悬停时的显示方式：

（尺寸不只是改变屏幕截图裁剪尺寸）

应用于 div 的样式是：

 #sample-menu {
  position: absolute;
  top: 95px;
  right: 608px;
}

我可能会以不同的方式定位 div 以使其工作，我只是想知道为什么工具提示似乎在绝对定位的 div 上完美工作，但只有在第一次悬停之后。

\*\* 我在 div 上添加了一些不是绝对定位的工具提示，我遇到了同样的问题（工具提示的第一次出现从我的元素中删除，然后在第一次出现后它是正确的）。我在页面上有一个 svg，其中包含使用 javascript (d3) 添加和调整大小的元素。在添加/调整所有页面元素后，我似乎需要调用一些东西来重新定位工具提示，但是，Bootstrap 工具提示或 Tether 重新定位解决方案都不适合我。

原文由 haydenwagner 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是 原始问题 的代码笔

我将主体的位置设置为“相对”，以便我的子元素可以完全按照我想要的方式定位，并且我还将主体的边距设置为“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'
  });
});

首先将样式应用于身体是一种不好的做法。这是一个 解决这个问题 的代码笔，它仍然给我我想要的外观和行为，没有工具提示问题。我在内容周围添加了一个容器以应用样式，然后 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'
  });
});

原文由 haydenwagner 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

以下内容过去对我有用，涉及绝对定位的工具提示：

 $('[data-toggle="tooltip"]').tooltip({
   container: 'body'
});

我只是在页面上的所有内容都完成渲染并且一切都设置好之后才触发这个脚本。同样在工具提示有更新的区域，我必须再次运行它。

原文由 Eric G 发布，翻译遵循 CC BY-SA 3.0 许可协议