All geek questions in one place

How to use tooltip plugin in twitter bootstrap modal dialog?

everything. I am using bootstrap v2.1.1 (the newest version currently). I need a hint 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 latest bootstrap version shows that the modal has a z-index of 1050.

and in bootstrap.min.css

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

This may not be a z-index problem, I think.

Can anybody help? thanks a lot.

+3
source share
5 answers

Try adding this to your CSS file:

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

The behavior you see is related to the bug introduced in Twitter Bootstrap 2.1.1 (see Issue No. 4980 ). A bug fix for it has already been submitted to the 2.1.2-wip branch , and 2.1.2 should appear next week.

The problem is that the tooltip is not added to the .modal element, but rather to the <body> . Instead of hacking CSS, I would recommend the following workaround as a temporary hold until 2.1.2 is available.

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

Jsfiddle

+6
source

Make sure you do this:

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

Above done. But what about the data-original-title attribute? You should give the following:

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

Problem Found: CSS Fix

 .tooltip {z-index: 50000;}​

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

+3
source

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

+1
source

Now you can do it with Bootstrap3, finally!

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

0
source

Source: https://habr.com/ru/post/954108/

More articles:


All Articles