【发布时间】：2016-08-05 23:19:59
【问题描述】：
当有很多弹出框时，如果我想使用“手动”触发那些弹出框，那么只有顶部和底部会显示在正确的位置。如果放置是向右或向左，则它是未对齐的。请看看这个小提琴..
https://jsfiddle.net/6nz4u940/
<html>
<head>
<title>Try v1.2 Bootstrap Online</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script type="text/javascript">
function popit(){
console.log("fddffdg");
$("[data-content]").each(function () {
$(this).attr({"data-container":"body","data-trigger":"manual","data-toggle":"popover"});
$(this).popover('toggle');
});
}
</script>
</head>
<body>
<button onclick="popit()">click me and scroll down, i wont show all popover</button>
<div class = "container" style = "padding: 100px 50px 10px;" >
<button type = "button" class = "btn btn-default" title = "Popover title"
data-container = "body" data-toggle = "popover" data-placement="right"
data-content = "Some content in Popover on left">
Popover on left
</button>
<br><br><br><br><br><br><br><br>
<button type = "button" class = "btn btn-default" title = "Popover title"
data-container = "body" data-toggle = "popover" data-placement="right"
data-content = "Some content in Popover on left">
Popover on left
</button>
<br><br><br><br><br><br><br><br>
<button type = "button" class = "btn btn-default" title = "Popover title"
data-container = "body" data-toggle = "popover" data-placement="right"
data-content = "Some content in Popover on left">
Popover on left
</button>
<br><br><br><br><br><br><br><br>
<button type = "button" class = "btn btn-default" title = "Popover title"
data-container = "body" data-toggle = "popover" data-placement="right"
data-content = "Some content in Popover on left">
Popover on left
</button>
<br><br><br><br><br><br><br><br>
<button type = "button" class = "btn btn-default" title = "Popover title"
data-container = "body" data-toggle = "popover" data-placement="right"
data-content = "Some content in Popover on left">
Popover on left
</button>
<br><br><br><br><br><br><br><br>
<button type = "button" class = "btn btn-default" title = "Popover title"
data-container = "body" data-toggle = "popover" data-placement="right"
data-content = "Some content in Popover on left">
Popover on left
</button>
<br><br><br><br><br><br><br><br>
<button type = "button" class = "btn btn-default" title = "Popover title"
data-container = "body" data-toggle = "popover" data-placement="right"
data-content = "Some content in Popover on left">
Popover on left
</button>
<br><br><br><br><br><br><br><br>
<button type = "button" class = "btn btn-default" title = "Popover title"
data-container = "body" data-toggle = "popover" data-placement="right"
data-content = "Some content in Popover on left">
Popover on left
</button>
<br><br><br><br><br><br><br><br>
<button type = "button" class = "btn btn-default" title = "Popover title"
data-container = "body" data-toggle = "popover" data-placement="right"
data-content = "Some content in Popover on left">
Popover on left
</button>
<br><br><br><br><br><br><br><br>
<button type = "button" class = "btn btn-default" title = "Popover title"
data-container = "body" data-toggle = "popover" data-placement="right"
data-content = "Some content in Popover on left">
Popover on left
</button>
<br><br><br><br><br><br><br><br><button type = "button" class = "btn btn-default" title = "Popover title"
data-container = "body" data-toggle = "popover" data-placement="right"
data-content = "Some content in Popover on left">
Popover on left
</button>
<br><br><br><br><br><br><br><br>
<button type = "button" class = "btn btn-default" title = "Popover title"
data-container = "body" data-toggle = "popover" data-placement="right"
data-content = "Some content in Popover on left">
Popover on left
</button>
<br><br><br><br><br><br><br><br>
<button type = "button" class = "btn btn-default" title = "Popover title"
data-container = "body" data-toggle = "popover" data-placement="right"
data-content = "Some content in Popover on left">
Popover on left
</button>
<br><br><br><br><br><br><br><br>
<button type = "button" class = "btn btn-default" title = "Popover title"
data-container = "body" data-toggle = "popover" data-placement="right"
data-content = "Some content in Popover on left">
Popover on left
</button>
<br><br><br><br><br><br><br><br>
<button type = "button" class = "btn btn-default" title = "Popover title"
data-container = "body" data-toggle = "popover" data-placement="right"
data-content = "Some content in Popover on left">
Popover on left
</button>
<br><br><br><br><br><br><br><br>
<button type = "button" class = "btn btn-default" title = "Popover title"
data-container = "body" data-toggle = "popover" data-placement="right"
data-content = "Some content in Popover on left">
Popover on left
</button>
<br><br><br><br><br><br><br><br>
<button type = "button" class = "btn btn-default" title = "Popover title"
data-container = "body" data-toggle = "popover" data-placement="right"
data-content = "Some content in Popover on left">
Popover on left
</button>
<br><br><br><br><br><br><br><br>
<button type = "button" class = "btn btn-default" title = "Popover title"
data-container = "body" data-toggle = "popover" data-placement="right"
data-content = "Some content in Popover on left">
Popover on left
</button>
<br><br><br><br><br><br><br><br>
<button type = "button" class = "btn btn-default" title = "Popover title"
data-container = "body" data-toggle = "popover" data-placement="right"
data-content = "Some content in Popover on left">
Popover on left
</button>
<br><br><br><br><br><br><br><br>
<button type = "button" class = "btn btn-default" title = "Popover title"
data-container = "body" data-toggle = "popover" data-placement="right"
data-content = "Some content in Popover on left">
Popover on left
</button>
<br><br><br><br><br><br><br><br>
<button type = "button" class = "btn btn-default" title = "Popover title"
data-container = "body" data-toggle = "popover" data-placement="right"
data-content = "Some content in Popover on left">
Popover on left
</button>
<br><br><br><br><br><br><br><br>
<button type = "button" class = "btn btn-primary" title = "Popover title"
data-container = "body" data-toggle = "popover" data-placement = "top"
data-content = "Some content in Popover on top">
Popover on top
</button>
<button type = "button" class = "btn btn-success" title = "Popover title"
data-container = "body" data-toggle = "popover" data-placement = "bottom"
data-content = "Some content in Popover on bottom">
Popover on bottom
</button>
<button type = "button" class = "btn btn-warning" title = "Popover title"
data-container = "body" data-toggle = "popover" data-placement = "right"
data-content = "Some content in Popover on right">
Popover on right
</button>
</div>
<script>
$(function (){
$("[data-toggle = 'popover']").popover();
});
</script>
</body>
</html>
【问题讨论】：
-
是的，老板，请稍等:)
-
欢迎来到 SO。下一次，improve the existing question 而不是仅仅发布另一个。当您等待“有人尽快发布解决方案”时，您应该阅读以下内容：stackoverflow.com/help/how-to-ask
-
他是个大人物，就算他不客气，我们也要给他一个答复……
标签： css twitter-bootstrap popover