How do I use tooltip plugin in twitter bootstrap's modal dialog?

问题

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.

回答1:

Try add this into your CSS file:

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

回答2:

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

回答3:

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/

回答4:

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

回答5:

Now you can do that with Bootstrap3, finally!

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

来源：https://stackoverflow.com/questions/12758872/how-do-i-use-tooltip-plugin-in-twitter-bootstraps-modal-dialog

标签

html

twitter-bootstrap

tooltip

modal-dialog