如何在 twitter bootstrap 的模态对话框中使用工具提示插件？答案

【问题标题】：How do I use tooltip plugin in twitter bootstrap's modal dialog?如何在 twitter bootstrap 的模态对话框中使用工具提示插件？
【发布时间】：2012-09-27 08:30:55
【问题描述】：

全部。我正在使用 bootstrap v2.1.1（当前最新版本）。我需要在我的模态对话框中有一个工具提示。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>Bootstrap v2.1.1</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link type="text/css" rel="stylesheet" href="css/bootstrap.min.css" />
    <link type="text/css" rel="stylesheet" href="css/bootstrap-responsive.min.css"/>

    <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("a[rel='tooltip']").tooltip({'placement': 'right', 'z-index': '3000'});
        });
    </script>
</head>

<body>      
    <div class="modal modal-open">
        <form class="modal-form form-horizontal">
            <div class="modal-header">
                <h3>Login</h3>
            </div>
            <div class="modal-body">
                <a href="#" rel="tooltip" title="This is a link.">A link</a>        <!-- check it out -->
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary">Login</button>
                <button type="reset" class="btn">Reset</button>
            </div>
        </form>
    </div>
</body>

但代码不起作用。最新版本的 bootstrap 显示模态的 z-index 为 1050。

在 bootstrap.min.css 中

.modal-open .modal .tooltip{z-index:2080;}

我认为这不可能是 z-index 问题。

有人可以帮忙吗？非常感谢。

【问题讨论】：

你试过改变z-index吗？
喜欢这个？
...
。好的，它工作正常。但是你知道什么是“.modal-open”类吗？非常感谢。
这个答案也有帮助：stackoverflow.com/questions/14025438/…

标签： html twitter-bootstrap tooltip modal-dialog

【解决方案1】：

确保您已完成以下操作：

<script type="text/javascript">
    $(document).ready(function() {
        $("a[rel='tooltip']").tooltip({'placement': 'right', 'z-index': '3000'});
    });
</script>

以上完成。但是data-original-title 属性呢？你应该给这个：

<a href="#" rel="tooltip" title="This is a link." data-original-title="This is a link.">A link</a>

发现问题：CSS 修复

.tooltip {z-index: 50000;}

演示：http://jsfiddle.net/zk7dF/1/

【讨论】：

谢谢！普拉文。但是 data-original-title 属性是没用的。我试过了。
哦，好吧。现在发生了什么？工具提示本身没有显示还是什么？或者您是否看到控制台出现错误？有演示吗？
工具提示未显示。控制台很好，没有错误日志或其他东西。再次感谢您。
将做一个小提琴并检查。
@ZhuoYING Bingo！！！有问题！看看更新的答案！！！ :) 这行得通吗？？？

【解决方案2】：

尝试将其添加到您的 CSS 文件中：

.tooltip {
    z-index: 2000 !important;
}

【讨论】：

-1 根据我的经验，用!important 大锤敲击东西会降低可维护性。

【解决方案3】：

您看到的行为是由于 Twitter Bootstrap 2.1.1 中引入的一个错误（请参阅Issue #4980）。它的错误修复已经是committed to the 2.1.2-wip branch，下周应该会发布 2.1.2。

问题源于工具提示没有附加到.modal 元素，而是附加到<body>。在 2.1.2 可用之前，我建议使用以下解决方法，而不是对 CSS 进行破解。

$('.modal a[rel="tooltip"]')
  .tooltip({placement: 'right'})
  .data('tooltip')
  .tip()
  .css('z-index', 2080);

JSFiddle

【讨论】：

【解决方案4】：

现在您终于可以使用 Bootstrap3 做到这一点了！

结帐http://getbootstrap.com/javascript/#modals

【讨论】：

如何在 Bootstrap 3 中解决这个问题？如果您在右上角的按钮上添加工具提示，即使您指定 body 作为容器，它仍然有错误的 z-index；所以你仍然必须添加 CSS 来覆盖 z-index。

【解决方案5】：

为我工作：
{ html: 是的, 位置：'正确'，容器：'.modal-body'，标题： '' };

【讨论】：