我正在尝试为一个触发器定位一个twitter-bootstrap popover,该触发器位于960px宽网页的最右上角 . 理想情况下,我将它放在底部并用CSS移动箭头(因此箭头位于弹出窗口的右上角) .
不幸的是,“放置”:“底部”定位还不够,因为它会将其置于触发器下方 .
我正在寻找能够将弹出窗口静态放置在触发器左下方的解决方案 . 我读了很多问题,却找不到任何问题 .
提示?
这很有效 . 测试 .
.popover { top: 71px !important; left: 379px !important; }
只需为您的popover好友添加一个属性!
如果你赶时间,请参见my fiddle
我们想要为特定的popover添加ID或类,以便我们可以通过CSS以我们想要的方式自定义它 .
请注意,我们不想自定义所有弹出窗口!这是一个可怕的想法(基本上,截至今天,接受的答案是一个可怕的想法..)
这是一个简单的例子 - 像这样显示popover:
HTML:
<button id="my-button" data-toggle="popover">My Button</button>
JS:
// We add the id 'my-popover' $("#my-button").popover({ html : true, placement: 'bottom' }).data('bs.popover').tip().attr('id', 'my-popover');
CSS:
#my-popover { left: -169px!important; } #my-popover .arrow { left: 90% }
我创建了一个jQuery插件,提供了4个附加位置:topLeft,topRight,bottomLeft,bottomRight
您只需包含缩小的js或未缩小的js,并在同一文件夹中包含匹配的css(minified vs unminified) .
https://github.com/dkleehammer/bootstrap-popover-extra-placements
在所有场合中最适合您的解决方案,特别是如果您的网站具有流畅的宽度,是使用Bootstrap Popover的 viewport 选项 .
这将使弹出窗口在您指定的选择器内占据宽度 . 因此,如果触发按钮位于该容器的右侧,则当弹出框位于该区域内时,引导箭头也将出现在右侧 . 见jsfiddle.net
如果您想从容器边缘获得一些空间,也可以使用 padding . 如果你不想填充只需使用 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 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中也这样做 . 基本上,无论您在哪里找到提及其他位置的代码,都要相应地添加您想要的位置 .
正如我前面提到的,这部分地解决了这个问题 . 我现在的问题是弹出窗口的小箭头没有出现 .
note: 如果您想在左上角使用弹出窗口,请使用'.top'的top属性和'.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; }
这可以扩展到其他地方的箭头位置..享受!
也许你不需要这种逻辑来表示响应行为 .
例如 .
placement: 'auto left'
Bootstrap 3的 placement 值为 placement . Bootstrap doc:
指定“auto”时,它将动态重新定向工具提示 . 例如,如果展示位置为“自动离开”,则工具提示会尽可能显示在左侧,否则它将显示正确 .
如果您查看bootstrap source codes,您会注意到可以使用保证金修改头寸 .
所以,首先你应该改变popover模板来添加自己的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--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类继承自tooltip类 .
Here's a simple jsFiddle
9 回答
这很有效 . 测试 .
一个简单的解决方案
只需为您的popover好友添加一个属性!
小提琴
如果你赶时间,请参见my fiddle
主要目标
我们想要为特定的popover添加ID或类,以便我们可以通过CSS以我们想要的方式自定义它 .
请注意,我们不想自定义所有弹出窗口!这是一个可怕的想法(基本上,截至今天,接受的答案是一个可怕的想法..)
示例
这是一个简单的例子 - 像这样显示popover:
HTML:
JS:
CSS:
我创建了一个jQuery插件,提供了4个附加位置:topLeft,topRight,bottomLeft,bottomRight
您只需包含缩小的js或未缩小的js,并在同一文件夹中包含匹配的css(minified vs unminified) .
https://github.com/dkleehammer/bootstrap-popover-extra-placements
Popover的视口
在所有场合中最适合您的解决方案,特别是如果您的网站具有流畅的宽度,是使用Bootstrap Popover的 viewport 选项 .
这将使弹出窗口在您指定的选择器内占据宽度 . 因此,如果触发按钮位于该容器的右侧,则当弹出框位于该区域内时,引导箭头也将出现在右侧 . 见jsfiddle.net
如果您想从容器边缘获得一些空间,也可以使用 padding . 如果你不想填充只需使用 viewport: '.container'
在以下html示例中:
和CSS:
我通过向bootstrap css库添加一些代码来解决这个问题(部分) . 您将不得不修改tooltip.js,tooltip.less,popover.js和popover.less
在tooltip.js中,在switch语句中添加这种情况
在tooltip.less中,在.tooltip {}中添加这两行
在popover.js和popover.less中也这样做 . 基本上,无论您在哪里找到提及其他位置的代码,都要相应地添加您想要的位置 .
正如我前面提到的,这部分地解决了这个问题 . 我现在的问题是弹出窗口的小箭头没有出现 .
note: 如果您想在左上角使用弹出窗口,请使用'.top'的top属性和'.left'的左侧属性
要引导3.0.0:
并修改
其中WWW是您正确的最大宽度,以显示您的弹出窗口内容 .
我必须对弹出窗口进行以下更改,并在下面放置一些重叠并正确显示箭头 .
JS
CSS
这可以扩展到其他地方的箭头位置..享受!
也许你不需要这种逻辑来表示响应行为 .
例如 .
Bootstrap 3的 placement 值为 placement . Bootstrap doc:
如果您查看bootstrap source codes,您会注意到可以使用保证金修改头寸 .
所以,首先你应该改变popover模板来添加自己的css类,以免与其他弹出窗口冲突:
然后使用css你可以轻松切换弹出位置:
此解决方案不会影响您拥有的其他弹出窗口 . 同样的解决方案也可用于工具提示,因为popover类继承自tooltip类 .
Here's a simple jsFiddle