Question

所有。我正在使用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问题。

任何人都可以帮忙吗？很多。

Answer 1

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

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

Answer 2

您看到的行为是由于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

Answer 3

确保您已完成以下操作：

<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 Fix

.tooltip {z-index: 50000;}

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

Answer 4

为我工作：
{ html：是的，安置：'正确'，容器：'。modal-body'，标题：'' };

Answer 5

现在你可以用Bootstrap3做到最后！

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

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

5 个答案:

JSFiddle

发现问题：CSS Fix

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