4

全て。私はブートストラップ 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>

しかし、コードは機能しません。ブートストラップの最新バージョンは、モーダルの 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>ます。CSSをハッキングするのではなく、2.1.2が利用可能になるまでの一時的な保留として、次の回避策をお勧めします。

$('.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 に答える