bootstrap popover:高级定位

我试图find位于960像素宽的网页最右上angular的触发器的twitter-bootstrappopup窗口。 理想情况下,我将它放在底部,并用CSS移动箭头(所以箭头位于popup窗口的右上angular)。

不幸的是,'放置':'底部'的定位是不够的,因为它会将其置于触发器下方。

我正在寻找解决scheme,将静态放置在触发器的左侧和下方。 我读了很多的问题,但找不到任何。

提示?

这工作。 testing。

.popover { top: 71px !important; left: 379px !important; } 

简单的解决scheme

只需添加一个属性给你的popover好友!


小提琴

如果你急着看我的小提琴


主要目标

我们想添加一个ID或一个类到一个特定的popover,以便我们可以按照我们想要的方式通过CSS来定制它。

请注意,我们不想定制所有的popup窗口! 这是可怕的想法(基本上,截至今天,接受的答案是一个可怕的想法..)


这里是一个简单的例子 – 像这样显示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% } 

我创build了一个jQuery插件,提供了4个附加的展示位置:topLeft,topRight,bottomLeft,bottomRight

你只需要包括缩小的js或者未定义的js,并且在同一个文件夹中有匹配的css(缩小vs未缩小)。

https://github.com/dkleehammer/bootstrap-popover-extra-placements

我解决了这个(部分)通过添加一些代码到引导CSS库。 你将不得不修改tooltip.js,tooltip.less,popover.js和popover.less

在tooltip.js中,在switch语句中添加这个case

 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中做同样的事情。 基本上,无论你在哪里find提及其他职位的代码,都要相应地添加你想要的职位。

正如我前面提到的,这部分解决了问题。 我现在的问题是,popover的小箭头没有出现。

注意:如果你想在左上angular有popup窗口,使用'.top'的top属性和'.left'属性,

为了引导3.0.0:

 .popover{ right:0!important; } 

并修改

 .popover { max-width:WWWpx!important; } 

WWW是你正确的最大宽度来显示你的popover内容。

我不得不做出以下更改,使popup窗口位于下方,并重叠显示正确的箭头。

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; } 

这可以扩展到其他地方的箭头位置..享受!

最好的解决scheme,将在所有时间,尤其是如果您的网站有一个stream畅的宽度,为您工作的是使用Bootstrap Popover的视口选项。

这将使popup窗口在你已经分配的select器内部取得宽度。 因此,如果触发器button位于该容器的右侧,则popup窗口在该区域内时,引导箭头也将出现在右侧。

 $('#popoverButton').popover({ container: 'body', placement: "bottom", html: true, viewport: ".container" }); 

在下面的html例子中:

 <div class="container"> <button type="button" id="popoverButton">Click Me!</button> </div> 

和CSS:

 .container { text-align:right; width: 100px; padding: 20px; } 

也许你不需要这个逻辑来进行响应行为。

例如

 placement: 'auto left' 

Bootstrap 3具有自动 放置的值。 Bootstrap文档 :

当指定“auto”时,它将dynamic调整工具提示的方向。 例如,如果放置是“自动离开”,则工具提示将尽可能显示在左侧,否则将显示正确。

如果你看看bootstrap源代码 ,你会注意到可以使用margin来修改位置。

所以,首先你应该改变popover模板来添加自己的css类,以免与其他popovers冲突:

 $(".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你可以轻松地移动popup窗口的位置:

 .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 */ } 

这个解决scheme不会影响你有其他的东西。 同样的解决scheme也可以在工具提示上使用,因为popover类从tooltip类inheritance。

这是一个简单的jsFiddle