How do I use tooltip plugin in twitter bootstrap&#

all. i am using bootstrap v2.1.1 (the newest version currently). i need a tooltip in my modal dialog.

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

but the code does NOT work. The lastest version of bootstrap shows the modal has a z-index of 1050.

and in bootstrap.min.css

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

This is could not be z-index issue, i think.

anyone can help ? thx a lot.

标签： html twitter-bootstrap tooltip modal-dialog

5条回答

趁早两清

2楼-- · 2019-04-10 12:06

Try add this into your CSS file:

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

0人赞添加讨论(0) 举报

唯我独甜

3楼-- · 2019-04-10 12:11

The behavior you are seeing is due to a bug introduced in Twitter Bootstrap 2.1.1 (see Issue #4980). The bug fix for it has already been committed to the 2.1.2-wip branch, and 2.1.2 should be coming out this coming week.

The problem stems from the fact that the tooltip is not being appended to the .modal element, but rather to the <body>. Rather than hacking on the CSS, I'd recommend the following workaround as a temporary hold over until the 2.1.2 is available.

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

JSFiddle

0人赞添加讨论(0) 举报

爷、活的狠高调

4楼-- · 2019-04-10 12:13

Make sure you have done these:

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

The above is done. But what about the data-original-title attribute? You should give this:

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

Found the issue: CSS Fix

.tooltip {z-index: 50000;}

Demo: http://jsfiddle.net/zk7dF/1/

0人赞添加讨论(0) 举报

forever°为你锁心

5楼-- · 2019-04-10 12:16

Now you can do that with Bootstrap3, finally!

Checkout http://getbootstrap.com/javascript/#modals

0人赞添加讨论(0) 举报

Melony?

6楼-- · 2019-04-10 12:25

Works for me:
{ html: true, placement: 'right', container: '.modal-body', title: '' };

0人赞添加讨论(0) 举报