4

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

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

4

5 回答 5

19

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

.tooltip {
    z-index: 2000 !important;
}
于 2012-10-06T11:21:14.953 回答
6

您看到的行为是由于 Twitter Bootstrap 2.1.1 中引入的错误（请参阅问题 #4980）。它的错误修复已经提交到 2.1.2-wip 分支，并且 2.1.2 应该会在下周发布。

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

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

JSFiddle

于 2012-10-07T00:50:56.293 回答
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修复

.tooltip {z-index: 50000;}​

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

于 2012-10-06T10:28:40.757 回答
1

对我有用：
{ html：true，placement：'right'，container：'.modal-body'，title：''};

于 2015-07-09T12:18:23.897 回答
0

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

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

于 2013-07-30T06:07:22.000 回答