引导工具提示导致按钮跳转答案

【问题标题】：Bootstrap tooltip causing buttons to jump引导工具提示导致按钮跳转
【发布时间】：2025-12-10 06:30:01
【问题描述】：

当我将鼠标悬停在按钮上并出现工具提示时，按钮会跳转。如果我禁用工具提示，它不会跳转。此外，右边的按钮失去了圆边。我怎样才能防止这种情况发生？

<div class="btn-group">
    <a rel="tooltip" class="btn" href="#" data-title="View Details"><i class="icon-list-alt"></i></a>
    <a rel="tooltip" class="btn" href="#" data-title="Delete"><i class="icon-trash">    </i></a>
</div>

Javascript：

$('[rel=tooltip]').tooltip();

工作版本...

http://jsfiddle.net/BA4zM/147/

这是一个无需跳转即可运行的网站...

http://wrapbootstrap.com/preview/WB005S479

【问题讨论】：

你并不孤单。你找到解决办法了吗？谢谢？
在 bootstrap-tooltip.js 文件的 2.3.0 版本中已修复。你可以在这里看到它的工作原理：jsfiddle.net/BA4zM/149
@bmorehokie 现在两者都不起作用....

标签： css twitter-bootstrap tooltip

【解决方案1】：

为了避免跳转，需要设置容器属性。这是记录在案的。

当使用带有 Bootstrap 输入组的工具提示和弹出框时，您必须设置容器选项以避免不必要的副作用。

尝试以下方法：

$('[rel=tooltip]').tooltip({container: 'body'});

【讨论】：

如果您还需要使用selector 来将带有工具提示的新元素即时添加到页面中，那么您需要通过数据设置container属性。 data-container="body"
嗨@Howdie！感谢解决方案，但是，我仍然很好奇，在工具提示期间 btn-group 上到底发生了什么？
@DeepakYadav，看来，tooltip 容器被插入到最近的后代元素，默认情况下，该容器的内容会影响按钮和按钮组的布局。明确指定 body 容器可以解决问题。
在引导对话框中不要使用正文，而是使用 modal-dialog data-container=".modal-dialog" 否则工具提示将不会显示

【解决方案2】：

正如 Howie 在https://*.com/a/14770263/7598367 所说，有必要将“容器”添加到工具提示中。

这并没有解决我的问题（我遇到了同样的问题），还需要在 JS 文件 BEFORE 中声明 .tooltip() 初始化，这样：

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

如果以后有人遇到同样的问题，希望这会有所帮助。

【讨论】：