Menu
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.
355
Try add this into your CSS file:
.tooltip {
z-index: 2000 !important;
}
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);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
