我正在尝试为位于 960px 宽网页右上角的触发器放置一个 Bootstrap 弹出框。
理想情况下,我会将它放在底部并使用 CSS 移动箭头(因此箭头位于弹出框的右上角)。不幸的是,'placement':'bottom' 定位是不够的,因为它会将它置于触发器下方。
我正在寻找将弹出框静态放置在触发器的下方和左侧的解决方案。
我正在尝试为位于 960px 宽网页右上角的触发器放置一个 Bootstrap 弹出框。
理想情况下,我会将它放在底部并使用 CSS 移动箭头(因此箭头位于弹出框的右上角)。不幸的是,'placement':'bottom' 定位是不够的,因为它会将它置于触发器下方。
我正在寻找将弹出框静态放置在触发器的下方和左侧的解决方案。
这行得通。经测试。
.popover {
top: 71px !important;
left: 379px !important;
}
只需向您的弹出框添加一个属性!如果您赶时间,请参阅我的 JSFiddle 。
我们想为特定的弹出框添加一个 ID 或一个类,以便我们可以通过 CSS 以我们想要的方式自定义它。
请注意,我们不想自定义所有弹出框!这是一个可怕的想法。
这是一个简单的示例 - 像这样显示弹出框:
// 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>
我创建了一个提供 4 个附加位置的 jQuery 插件:topLeft、topRight、bottomLeft、bottomRight
您只需包含缩小的 js 或未缩小的 js,并将匹配的 css(缩小与未缩小)放在同一文件夹中。
https://github.com/dkleehammer/bootstrap-popover-extra-placements
在所有情况下都适合您的最佳解决方案是使用Bootstrap Popover的视口选项,尤其是在您的网站具有流动宽度的情况下。
这将使弹出框在您分配的选择器内占据宽度。因此,如果触发按钮位于该容器的右侧,则当弹出框位于该区域内时,引导箭头也会出现在右侧。见jsfiddle.net
如果您想从容器边缘留出一些空间,您也可以使用填充。如果你不想填充,只需使用viewport: '.container'
$('#popoverButton').popover({
container: 'body',
placement: "bottom",
html: true,
viewport: { selector: '.container', padding: 5 },
content: '<strong>Hello Wooooooooooooooooooooooorld</strong>'
});
在以下 html 示例中:
<div class="container">
<button type="button" id="popoverButton">Click Me!</button>
</div>
并使用 CSS:
.container {
text-align:right;
width: 100px;
padding: 20px;
background: blue;
}
与视口类似,在 Bootstrap 版本 4 中,popover 引入了新的选项边界
https://getbootstrap.com/docs/4.1/components/popovers/#options
我通过向引导 css 库添加一些代码行来解决这个问题(部分)。您将不得不修改 tooltip.js、tooltip.less、popover.js 和 popover.less
在 tooltip.js 中,在 switch 语句中添加这种情况
case 'bottom-right':
tp = {top: pos.top + pos.height, left: pos.left + pos.width}
break
在 tooltip.less 中,将这两行添加到 .tooltip{}
&.bottom-right { margin-top: -2px; }
&.bottom-right .tooltip-arrow { #popoverArrow > .bottom(); }
在 popover.js 和 popover.less 中做同样的事情。基本上,无论您在哪里找到提到其他位置的代码,都相应地添加您想要的位置。
正如我之前提到的,这部分解决了问题。我现在的问题是弹出框的小箭头没有出现。
注意:如果你想让弹出框在左上角,使用'.top'的top属性和'.left'的left属性
引导 3.0.0:
.popover{ right:0!important; }
也修改
.popover { max-width:WWWpx!important; }
其中 WWW 是显示弹出框内容的正确最大宽度。
我必须对弹出框进行以下更改,使其位于下方并有一些重叠并正确显示箭头。
js
case 'bottom-right':
tp = {top: pos.top + pos.height + 10, left: pos.left + pos.width - 40}
break
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;
}
这可以扩展到其他地方的箭头位置..享受!
如果您查看引导程序源代码,您会注意到可以使用边距修改位置。
因此,首先您应该更改弹出框模板以添加自己的 css 类,以免与其他弹出框冲突:
$(".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>'
});
然后使用 css 你可以很容易地改变 popover 的位置:
.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 */
}
此解决方案不会影响您拥有的其他弹出框。同样的解决方案也可以用于工具提示,因为 popover 类继承自工具提示类。
你当然可以。幸运的是,有一种干净的方法可以做到这一点,它也在 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>'
});
在你的css文件中: -
.your-custom-class {
bottom: your value;
}
确保在 bootstrap 的工具提示文档中添加模板,并添加您的自定义类名称并使用 css 对其进行样式设置
而且,就是这样。您可以在https://getbootstrap.com/docs/4.0/components/tooltips/上找到更多相关信息
也许您不需要这种逻辑来进行响应行为。
例如
placement: 'auto left'
Bootstrap 3 具有放置的自动值。引导文档:
当指定“自动”时,它将动态地重新定位工具提示。例如,如果放置为“自动向左”,则工具提示将尽可能显示在左侧,否则将显示在右侧。