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

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

我认为问题的出现是因为工具提示所附加的div是绝对定位的

以下是my html中的div标记：

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

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

---

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

以下内容过去适用于涉及绝对定位的工具提示：

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

我只是在页面上的所有渲染都完成并设置好之后触发这个脚本。此外，在有工具提示更新的区域，我必须再次运行此操作。

以下是一个示例

我将主体的位置设置为“相对”，这样子元素就可以完全按照我想要的方式定位，并且我还将主体的边距设置为“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建议的工具提示“container:'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'
  });
});

---

您还可以在工具提示配置中指定其他容器（不仅仅是

'body'

）

我有一个HTML项目，如下所示：

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

...
有工具提示的测试消息

...

并且在使用此JS计算工具提示定位时存在问题：

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

据我所知，这个问题是由

body

元素的

margin:0

样式引起的

---

为了在不更改

body

元素和默认标记的样式的情况下解决此问题，我使用了其他容器，如下所示：

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

所有的工作都很完美，没有任何变化

---

从引导程序文档：

---

如果您查看bootstrap的tooltip.js，您会看到，如果您将

容器

值设置为字符串，它将尝试在DOM中查找具有给定选择器的元素（请参见

\u proto.\u getContainer（）方法

）

我对bootstrap 4也有相同的问题，并且因为这里的其他答案对我不起作用（对于容器：'body'），我暂时修复了它，只在第一次鼠标输入时初始化它。（之后将存在“数据原始标题”属性）

这段代码的另一个好处是，工具提示将适用于页面上尚未成为DOM一部分的每个新项。这是因为我们从$（document）.on（'mouseenter'，…）开始

---

下面是一个很酷的解决方案：不使用默认引导的工具提示，而只指定自定义的数据提示：

<button type="button" class="btn" data-hint="Add new column">

---

其中，block是任何包含新添加元素的父元素，这些元素包含提示。简单高效。也使HTML变得更短：-）

添加

边界：“窗口”

为我解决了这个问题，如下所示：

       $(document).ready(function () {
            $('[data-toggle="tooltip"]').tooltip({
                trigger: 'hover click focus',
                boundary: 'window'
            })
        });

从引导文档中：

工具提示位置尝试在父容器出现溢出时自动更改：自动或溢出：滚动，就像我们的.table响应一样，但仍保持原始位置的位置。要解决此问题，请将边界选项设置为除默认值“scrollParent”以外的任何值，例如“window”：

---

我看到引导页面提到可以指定这个“container”选项，但我不完全理解它的作用。页面上说要指定容器“以避免在更复杂的组件中出现渲染问题”，然后“将工具提示附加到特定元素”。我在页面加载后尝试了你的代码，但没有解决我的问题。用javascript隐藏和显示我的工具提示一次可以解决问题，但我不明白为什么我不能在不隐藏和显示它的情况下重新定位它。在Tether文档中，它说您可以在页面就位后调用“Tether.position（）”，但是，这对我也不起作用。@haydenwagner在其他javascript运行完毕后，您有没有办法触发上述代码？我只有在后渲染函数中启动该方法时才有幸使用该方法。我对您的问题的假设是，其他javascript/css在调用此函数后正在移动元素，足以使事情变得一团糟。是的，我只是在所有其他代码之后尝试了它，但它对我不起作用。我甚至在你的代码上设置了一个超时，以确保它在稍后启动，在第一次悬停时，按钮上的工具提示仍然会被删除。如果它发生在非绝对位置的工具提示上，则可能意味着一般工具提示代码被破坏。你能把你的问题复制成一个代码笔并链接到这里，这样我们就可以更好地了解发生了什么？谢谢可能对某些人有用。在Bootstrap 4中发生的一件奇怪的事情是在div中的任何位置都只放置“”即使有多个工具提示，这个包装器修复了该div中所有工具提示的问题。它变得更好：它也适用于popover（popper.min.js）！同样在手机上（Android和iPhone）。

<button type="button" class="btn" data-hint="Add new column">

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()
    });
}

       $(document).ready(function () {
            $('[data-toggle="tooltip"]').tooltip({
                trigger: 'hover click focus',
                boundary: 'window'
            })
        });