如何定位一个引导酥料饼？(How to position a Bootstrap popover?)

我试图来定位引导酥料饼为上宽960像素网页的最右上角坐在一个触发器。

理想情况下，我想它放置在底部，并用CSS将箭头（使箭头位于酥料饼的右上角）。 不幸的是，“安置”：“底”的定位是不够的，因为它会居中触发下方。

我正在寻找解决方案，将会把酥料饼的静态以下部分以及触发的左侧。

Answer 1:

这工作。 测试。

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

Answer 2:

只需一个属性添加到您的酥料饼！ 见我的jsfiddle如果你在忙乱之中。

我们希望一个ID或类添加到特定酥料饼，使我们可以定制它，我们通过CSS所希望的方式。

请注意，我们不希望自定义所有popovers！ 这是可怕的想法。

下面是一个简单的例子 - 显示像这样的酥料饼：

 // 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> 

Answer 3:

我创建了一个jQuery插件，提供了4个展示位置产生额外的：左上，topRight，BOTTOMLEFT，bottomRight

你只要有任何缩小的JS或unminified JS和在同一文件夹中的匹配CSS（精缩VS unminified）。

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

Answer 4:

酥料饼的视口（引导V3）

这会为你在所有occassions工作，特别是如果你的网站有一个液体宽度最好的解决办法，就是用引导酥料饼的视口选项。

这将使您分配一个选择器内酥料饼拿宽度。 因此，如果触发按钮是在该容器的右边，引导箭头也将出现在右侧，而酥料饼是区域内。 见jsfiddle.net

如果你想从容器边缘的一些空间，您还可以使用填充 。 如果你不想要填充只使用视：“.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;
}

酥料饼的边界（引导V4）

类似视口，在引导版本4，酥料饼引入了新的选择边界

https://getbootstrap.com/docs/4.1/components/popovers/#options

Answer 5:

我通过添加一些代码行到引导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”的顶部属性和左边的“左”属性

Answer 6:

要引导3.0.0：

.popover{ right:0!important; }

和修改过

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

其中WWW是您正确的最大宽度，以显示你的酥料饼的内容。

Answer 7:

我不得不作出以下修改为酥料饼与一些重叠下方位置，并正确显示的箭头。

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

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

Answer 8:

你当然可以。 幸运的是有一个干净的方式来做到这一点，它是引导酥料饼/提示文档中也是如此。

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

确保添加自举的工具提示文档中的模板，并添加自定义类的名字，并使用CSS样式它

而且，就是这样。 你可以找到更多有关这对https://getbootstrap.com/docs/4.0/components/tooltips/

Answer 9:

也许你并不需要这个逻辑的反应行为。

如

placement: 'auto left'

引导3对放置 汽车价值。 引导文档 ：

当指定了“自动”，它会动态地重新调整提示。 例如，如果位置是“汽车左”，工具提示会显示到左边可能的情况下，否则会显示正确。

Answer 10:

如果你看一看引导的源代码 ，你会发现，位置可以用保证金进行修改。

所以，首先你应该改变酥料饼的模板，添加自己的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，你可以很容易地转移酥料饼的位置：

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

该解决方案将不会影响你有其他popovers。 同样的解决方案可以在提示，因为酥料饼类从工具提示类继承来使用。

这里有一个简单的jsfiddle

文章来源: How to position a Bootstrap popover?