How do I use tooltip plugin in twitter bootstrap&#

2019-04-10 11:38发布

站内文章 / 前沿技术
37 0 0

问题:

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



标签： html twitter-bootstrap tooltip modal-dialog
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~