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

【问题标题】：Bootstrap tooltip in wrong position on initial hover, then in correct position初始悬停时引导工具提示在错误位置，然后在正确位置
【发布时间】：2017-01-11 23:13:30
【问题描述】：

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

我认为问题的出现是因为工具提示附加到的 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 重新定位解决方案都没有为我工作。

【问题讨论】：

This 可能与某人相关且对某人有所帮助。

标签： html css twitter-bootstrap tooltip

【解决方案1】：

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

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

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

【讨论】：

我看到引导页面提到可以指定这个“容器”选项，但我不完全明白它的作用。该页面说要指定容器“以避免在更复杂的组件中呈现问题”，然后是“将工具提示附加到特定元素”。我在页面加载后尝试了您的代码，但它没有解决我的问题。
用javascript隐藏和显示我的工具提示可以解决问题，但我不明白为什么我不能在不隐藏和显示的情况下重新定位它。在 Tether 文档中，它说您可以在页面到位后调用“tether.position()”，但是，这对我也不起作用。
@haydenwagner 有什么方法可以在其他 javascript 运行完成后触发上述代码？当我在渲染后函数中触发它时，我只对这种方法感到幸运。我对您的问题的假设是，在调用此函数后，其他 javascript/css 正在移动元素足以搞砸事情。
是的，我只是在我的所有其他代码之后尝试了它，但它对我不起作用。我什至在你的代码上设置了一个超时，以确保它稍后触发，并且在第一次悬停时，工具提示仍然从按钮中删除。
我已经制作了基本的 codepen，但我现在无法复制问题。明天上班的时候会尽量贴近原项目再分享。感谢您的建议

【解决方案2】：

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

我有这样的 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>

工具提示定位计算有问题，使用这个 JS：

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

据我了解，问题是由body 元素的margin: 0 样式引起的。

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

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

并且所有工作都完美无缺。

来自引导文档：

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.

如果您检查 bootstrap 的 tooltip.js，您会看到，如果您将 container 值设置为字符串，它将尝试在 DOM 中查找具有给定选择器的元素（参见 _proto._getContainer() method）

【讨论】：

Bootstrap 4 中发生的奇怪事情是仅将“

”放在 div 中甚至多个工具提示的任何位置，此包装器解决了所有工具提示的问题在那个分区中。它变得更好：它也适用于 popover (popper.min.js)！也适用于移动设备（Android 和 iPhone）。

【解决方案3】：

这是codepen of the original problem

我已将正文的位置设置为“相对”，以便我的子元素可以按照我想要的方式绝对定位，并且我还将正文的边距设置为“0 auto”以使内容居中。这些样式干扰了 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'
  });
});

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

【讨论】：

【解决方案4】：

添加 boundary: 'window' 为我解决了这个问题，如下所示：

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

来自引导文档：

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

【讨论】：

【解决方案5】：

我在使用 Bootstrap 4 时遇到了同样的问题，因为这里的其他答案对我不起作用（那些带有容器：'body' 的答案），我暂时通过初始化它来修复它仅在第一个 mouseenter。（之后属性“data-original-title”将存在）

这段代码的另一个好处是，工具提示将适用于页面上尚不属于 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')
    ;
});

【讨论】：

【解决方案6】：

这是一个很酷的解决方法：您只分配自定义 data-hint，而不是使用默认的 Bootstrap 工具提示：

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

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

其中 block 是任何包含新添加的包含提示的元素的父级。简单高效。也使 HTML 更短:-)

【讨论】：

【解决方案7】：

我遇到了无法修复的 jquery 和引导工具提示的错位问题（即，当使用带有水平滚动表的数据表 ssp 时）。只有插件对我有用：https://github.com/tiaanduplessis/wenk

【讨论】：