Javascript 如何定位 Bootstrap 弹出框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10797912/
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 to position a Bootstrap popover?
提问by koichirose
I'm trying to position a Bootstrap popover for a trigger that sits on the far top-right corner of a 960px wide web page.
我正在尝试为位于 960 像素宽网页最右上角的触发器定位 Bootstrap 弹出窗口。
Ideally, I'd position it on the bottom and move the arrow with CSS (so the arrow is on the top-right of the popover). Unfortunately the 'placement':'bottom' positioning is not enough, since it will center it below the trigger.
理想情况下，我会将其放置在底部并使用 CSS 移动箭头（因此箭头位于弹出窗口的右上角）。不幸的是， 'placement':'bottom' 定位是不够的，因为它将在触发器下方居中。
I'm looking for solution that will place the popover statically below and on the left of the trigger.
我正在寻找将弹出窗口静态放置在触发器的下方和左侧的解决方案。
采纳答案by rboarman
This works. Tested.
这有效。测试。
.popover {
top: 71px !important;
left: 379px !important;
}
回答by Mick
Simply add an attribute to your popover! See my JSFiddleif you're in a hurry.
只需为您的弹出框添加一个属性即可！如果您赶时间，请参阅我的 JSFiddle。
We want to add an ID or a class to a particular popover so that we may customize it the way we want via CSS.
我们想向特定的弹出窗口添加一个 ID 或一个类，以便我们可以通过 CSS 以我们想要的方式对其进行自定义。
Please note that we don't want to customize all popovers! This is terrible idea.
请注意，我们不想自定义所有弹出框！这是一个可怕的想法。
Here is a simple example - display the popover like this:
这是一个简单的例子 - 像这样显示弹出窗口：
// We add the id 'my-popover'
$("#my-button").popover({
html : true,
placement: 'bottom'
}).data('bs.popover').tip().attr('id', 'my-popover');#my-popover {
left: -169px!important;
}
#my-popover .arrow {
left: 90%
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<button id="my-button" data-toggle="popover">My Button</button>回答by dkleehammer
I've created a jQuery plugin that provides 4 additonal placements: topLeft, topRight, bottomLeft, bottomRight
我创建了一个 jQuery 插件，它提供了 4 个附加位置：topLeft、topRight、bottomLeft、bottomRight
You just include either the minified js or unminified js and have the matching css (minified vs unminified) in the same folder.
您只需包含缩小的 js 或未缩小的 js，并将匹配的 css（缩小与未缩小）放在同一文件夹中。
https://github.com/dkleehammer/bootstrap-popover-extra-placements
https://github.com/dkleehammer/bootstrap-popover-extra-placements
回答by Datsos
Popover's Viewport (Bootstrap v3)
Popover 的视口（Bootstrap v3）
The best solution that will work for you in all occassions, especially if your website has a fluid width, is to use the viewportoption of the Bootstrap Popover.
在所有情况下都适用的最佳解决方案是使用Bootstrap Popover的视口选项，尤其是当您的网站具有流体宽度时。
This will make the popover take width inside a selector you have assigned. So if the trigger button is on the right of that container, the bootstrap arrow will also appear on the right while the popover is inside that area. See jsfiddle.net
这将使弹出窗口在您指定的选择器中占据宽度。因此，如果触发按钮位于该容器的右侧，则当弹出框位于该区域内时，引导箭头也会出现在右侧。参见jsfiddle.net
You can also use paddingif you want some space from the edge of container. If you want no padding just use viewport: '.container'
如果您想要从容器边缘留出一些空间，您也可以使用填充。如果你不想填充就使用viewport: '.container'
$('#popoverButton').popover({
container: 'body',
placement: "bottom",
html: true,
viewport: { selector: '.container', padding: 5 },
content: '<strong>Hello Wooooooooooooooooooooooorld</strong>'
});
in the following html example:
在以下 html 示例中：
<div class="container">
<button type="button" id="popoverButton">Click Me!</button>
</div>
and with CSS:
并使用 CSS：
.container {
text-align:right;
width: 100px;
padding: 20px;
background: blue;
}
Popover's Boundary (Bootstrap v4)
Popover 的边界（Bootstrap v4）
Similar to viewport, in Bootstrap version 4, popover introduced the new option boundary
与视口类似，在 Bootstrap 版本 4 中，popover 引入了新的选项边界
https://getbootstrap.com/docs/4.1/components/popovers/#options
https://getbootstrap.com/docs/4.1/components/popovers/#options
回答by khaled
I solved this (partially) by adding some lines of code to the bootstrap css library. You will have to modify tooltip.js, tooltip.less, popover.js, and popover.less
我通过向 bootstrap css 库添加一些代码行解决了这个问题（部分）。您将不得不修改 tooltip.js、tooltip.less、popover.js 和 popover.less
in tooltip.js, add this case in the switch statement there
在 tooltip.js 中，在 switch 语句中添加这个 case
case 'bottom-right':
tp = {top: pos.top + pos.height, left: pos.left + pos.width}
break
in tooltip.less, add these two lines in .tooltip{}
在 tooltip.less 中，在 .tooltip{} 中添加这两行
&.bottom-right { margin-top: -2px; }
&.bottom-right .tooltip-arrow { #popoverArrow > .bottom(); }
do the same in popover.js and popover.less. Basically, wherever you find code where other positions are mentioned, add your desired position accordingly.
在 popover.js 和 popover.less 中做同样的事情。基本上，无论您在何处找到提及其他位置的代码，请相应地添加您想要的位置。
As I mentioned earlier, this solved the problem partially. My problem now is that the little arrow of the popover does not appear.
正如我之前提到的，这部分解决了问题。我现在的问题是弹出框的小箭头没有出现。
note:if you want to have the popover in top-left, use top attribute of '.top' and left attribute of '.left'
注意：如果你想在左上角有弹出框，使用 '.top' 的 top 属性和 '.left' 的 left 属性
回答by manufosela
To bootstrap 3.0.0:
要引导 3.0.0：
.popover{ right:0!important; }
And modify too
还有修改
.popover { max-width:WWWpx!important; }
where WWW is your correct max-width to show your popover content.
其中 WWW 是显示弹出框内容的正确最大宽度。
回答by siruscoder
I had to make the following changes for the popover to position below with some overlap and to show the arrow correctly.
我必须对弹出框进行以下更改，使其在下方放置一些重叠并正确显示箭头。
js
js
case 'bottom-right':
tp = {top: pos.top + pos.height + 10, left: pos.left + pos.width - 40}
break
css
css
.popover.bottom-right .arrow {
left: 20px; /* MODIFIED */
margin-left: -11px;
border-top-width: 0;
border-bottom-color: #999;
border-bottom-color: rgba(0, 0, 0, 0.25);
top: -11px;
}
.popover.bottom-right .arrow:after {
top: 1px;
margin-left: -10px;
border-top-width: 0;
border-bottom-color: #ffffff;
}
This can be extended for arrow locations elsewhere .. enjoy!
这可以扩展到其他地方的箭头位置..享受！
回答by Buksy
If you take a look at bootstrap source codes, you will notice that position can be modified using margin.
如果您查看bootstrap 源代码，您会注意到可以使用保证金修改位置。
So, first you should change popover template to add own css class to not get in conflict with other popovers:
因此，首先您应该更改 popover 模板以添加自己的 css 类，以免与其他 popover 冲突：
$(".trigger").popover({
html: true,
placement: 'bottom',
trigger: 'click',
template: '<div class="popover popover--topright" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
});
Then using css you can easily shift popover position:
然后使用 css 您可以轻松地移动弹出框位置：
.popover.popover--topright {
/* margin-top: 0px; // Use to change vertical position */
margin-right: 40px; /* Use to change horizontal position */
}
.popover.popover--topright .arrow {
left: 88% !important; /* fix arrow position */
}
This solution would not influence other popovers you have. Same solution can be used on tooltips as well because popover class inherit from tooltip class.
此解决方案不会影响您拥有的其他弹出窗口。同样的解决方案也可以用于工具提示，因为 popover 类继承自工具提示类。
回答by Nadun Malinda
Sure you can. Fortunately there is a clean way to do that and it is in the Bootstrap popover / tooltip documentation as well.
你当然可以。幸运的是，有一种干净的方法可以做到这一点，它也在 Bootstrap 弹出窗口/工具提示文档中。
let mySpecialTooltip = $('#mySpecialTooltip);
mySpecialTooltip.tooltip({
container: 'body',
placement: 'bottom',
html: true,
template: '<div class="tooltip your-custom-class" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'
});
in your css file:-
在您的 css 文件中：-
.your-custom-class {
bottom: your value;
}
Make sure to add the template in bootstrap's tooltip documentation and add your custom class name and style it using css
确保在 bootstrap 的工具提示文档中添加模板，并使用 css 添加自定义类名和样式
And, that's it. You can find more about this on https://getbootstrap.com/docs/4.0/components/tooltips/
而且，就是这样。您可以在https://getbootstrap.com/docs/4.0/components/tooltips/上找到更多相关信息
回答by Horacio Alexandre Fernandes
Maybe you don't need this logic for a responsive behavior.
也许你不需要这个逻辑来响应行为。
E.g.
例如
placement: 'auto left'
Bootstrap 3 has autovalue for placement. Bootstrap doc:
Bootstrap 3 具有自动放置值。引导程序文档：
When "auto" is specified, it will dynamically reorient the tooltip. For example, if placement is "auto left", the tooltip will display to the left when possible, otherwise it will display right.
当指定“auto”时，它将动态重新定向工具提示。例如，如果放置是“自动向左”，则工具提示将尽可能显示在左侧，否则将显示在右侧。
