twitter-bootstrap twitter bootstrap css/javascript 库上的“popover”问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7584933/
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
"popover" problems on twitter bootstrap css/javascript library
提问by Pabluez
I've tried to implement popover javascript on my site with twitter bootstrap and i couldn't. If anyone could help me with my code, i would appreciate a lot. thanks in advance for that.
我尝试使用 twitter bootstrap 在我的网站上实现 popover javascript，但我不能。如果有人可以帮助我编写代码，我将不胜感激。提前感谢。
<head>
...
<script src="scripts/jquery.min.js"></script>
<script src="scripts/html5.js"></script>
<script src="scripts/bootstrap-tabs.js"></script>
<script src="scripts/bootstrap-alerts.js"></script>
<script src="scripts/bootstrap-popover.js"></script>
<script src="scripts/bootstrap-twipsy.js"></script>
<script src="scripts/bootstrap-modal.js"></script>
<script src="1.3.0/bootstrap-scrollspy.js"></script> -->
<link rel="stylesheet" href="bootstrap.css" />
...
</head>
<body>
...
<div class="tab-content">
<div class="active" id="dwcenter_iso">
<table class="zebra-striped">
<thead>
<tr>
<th>Arquivo</th>
<th>Tamanho</th>
<th>Data</th>
<th>md5</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="download.php">nimbus-opensource-backup-1.1.iso</a> <span class="label success">new</span></td>
<td>332M</td>
<td>16/09/11</td>
<!-- HERE GOES -->
<td><a href="#" class="btn danger" rel="popover" title="md5 Check Sum" data-content="343453453453453rfef34">ver</a>
<script>
$(function () {
$('a[rel=popover]')
.popover({
html: true
})
.click(function(e) {
e.preventDefault()
})
})
</script>
</td>
</tr>
<tr>
<td>nimbus-opensource-backup-1.0.iso <span class="label important">deprecated</span></td>
<td>332M</td>
<td>10/08/11</td>
<td>ver</td>
</tr>
<tr>
<td>nimbus-opensource-backup-0.9beta.iso <span class="label important">deprecated</span></td>
<td>380MB</td>
<td>25/09/10</td>
<td>ver</td>
</tr>
</tbody>
</table>
</div>
...
</body>
i have tried "html: true" and the bootstrap doc example "offset: 10". It does shows the red danger button, but nothing happens then (the popover doesn't work).
我尝试过“html：true”和引导程序文档示例“offset：10”。它确实显示了红色的危险按钮，但没有任何反应（弹出窗口不起作用）。
And something else, how could i implement this on the TD element of the table rather than the button?
还有别的，我怎么能在表格的 TD 元素而不是按钮上实现这个？
采纳答案by Adam Collingburn
Change these 2 scripts around as popover is an extension of twipsy and needs to be loaded first...
更改这两个脚本，因为 popover 是 twipsy 的扩展，需要先加载...
<script src="scripts/bootstrap-twipsy.js"></script>
<script src="scripts/bootstrap-popover.js"></script>
You don't need to set html to true, here's mine with options you can change if you wish
您不需要将 html 设置为 true，这是我的选项，您可以根据需要进行更改
$(function(){
$(".btn").popover({
offset: 5,
placement: 'left'
});
});
