Html 如何在 twitter bootstrap 的模态对话框中使用工具提示插件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12758872/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I use tooltip plugin in twitter bootstrap's modal dialog?
提问by Zhuo YING
all. i am using bootstrap v2.1.1 (the newest version currently). i need a tooltip in my modal dialog.
全部。我正在使用引导程序 v2.1.1（当前最新版本）。我的模态对话框中需要一个工具提示。
<!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.
但代码不起作用。bootstrap 的最新版本显示模态的 z-index 为 1050。
and in bootstrap.min.css
并在 bootstrap.min.css 中
.modal-open .modal .tooltip{z-index:2080;}
This is could not be z-index issue, i think.
我认为这不可能是 z-index 问题。
anyone can help ? thx a lot.
任何人都可以帮忙吗？多谢。
回答by Sergey
Try add this into your CSS file:
尝试将其添加到您的 CSS 文件中：
.tooltip {
z-index: 2000 !important;
}
回答by merv
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.
您看到的行为是由于 Twitter Bootstrap 2.1.1 中引入的错误（请参阅问题 #4980）。它的错误修复已经提交到 2.1.2-wip 分支，2.1.2 应该会在下周发布。
The problem stems from the fact that the tooltip is not being appended to the .modalelement, 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元素，而是附加到<body>. 我不建议修改 CSS，而是建议使用以下解决方法作为暂时搁置，直到 2.1.2 可用。
$('.modal a[rel="tooltip"]')
.tooltip({placement: 'right'})
.data('tooltip')
.tip()
.css('z-index', 2080);
JSFiddle
JSFiddle
回答by Praveen Kumar Purushothaman
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-titleattribute? You should give this:
以上就完成了。但是data-original-title属性呢？你应该给这个：
<a href="#" rel="tooltip" title="This is a link." data-original-title="This is a link.">A link</a>
Found the issue: CSS Fix
发现问题：CSS Fix
.tooltip {z-index: 50000;}?
Demo: http://jsfiddle.net/zk7dF/1/
演示：http: //jsfiddle.net/zk7dF/1/
回答by Ihor Pavlyk
Works for me:
{
html: true,
placement: 'right',
container: '.modal-body',
title: ''
};
对我
有用：{ html: true, place: 'right', container: '.modal-body', title: '' };
回答by jiantongc
Now you can do that with Bootstrap3, finally!
现在你终于可以用 Bootstrap3 做到这一点了！
