twitter-bootstrap 自定义 twitter bootstrap popover 箭头
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15230317/
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
Customizing twitter bootstrap popover arrow
提问by So Many Goblins
I could not find any relevant information on this, but I find it hard to swallow that it's not doable.
我找不到任何相关信息，但我发现很难接受它是不可行的。
How can I customise the arrow for the popovers? I already did but changing the classes .arrow and such, but the position of the popover gets screwed up.
如何自定义弹出框的箭头？我已经做了，但改变了类 .arrow 等，但弹出框的位置被搞砸了。
So, what is the correct way to do so? I couldn't find any documentation.
那么，这样做的正确方法是什么？我找不到任何文档。
Following are the classes I've been using, so far the arrow looks wrong:
以下是我一直在使用的类，到目前为止箭头看起来是错误的：
.popover {
position: absolute;
top: 0;
left: 0;
z-index: 1010;
display: none;
padding: 5px;
}
.popover.top {
margin-top: -5px;
}
.popover.right {
margin-left: 5px;
}
.popover.bottom {
margin-top: 5px;
}
.popover.left {
margin-left: -5px;
}
.popover.top .arrow {
bottom: 0;
left: 50%;
margin-left: -5px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #000000;
}
.popover.right .arrow {
top: 50%;
left: 0;
margin-top: -5px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 5px solid #000000;
}
.popover.bottom .arrow {
top: 0px;
left: 50%;
margin-left: -5px;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-bottom: 19px solid #000000;
}
.popover.left .arrow {
top: 50%;
right: 0;
margin-top: -5px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid #000000;
}
.popover .arrow {
position: absolute;
width: 0;
height: 0;
}
.popover-inner {
padding: 3px;
width: auto;
overflow: hidden;
background: #000000;
background: rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
}
.popover-title {
padding: 9px 15px;
line-height: 1;
background-color: #252525;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
background-color: rgba(37, 37, 37, 0.7);
font-size: 14px;
color: #7e7e7e;
}
.popover-content {
padding: 14px;
background-color: #252525;
-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
background-color: rgba(37, 37, 37, 0.7);
}
.popover-content p, .popover-content ul, .popover-content ol {
margin-bottom: 0;
}
.popover-content table {
background: transparent;
}
.popover-content table td {
border: 0px;
background: transparent;
color: #7e7e7e;
}
The arrow should be pointing to the red square
箭头应该指向红色方块
Thanks.
谢谢。
采纳答案by HaNdTriX
Twitter Bootstrap is based on Less.
Twitter Bootstrap 基于Less。
If you want to change the appearance of its arrows use the bootstrap less variablesto do so.
如果您想更改其箭头的外观，请使用引导程序 less 变量来执行此操作。
// Tooltips and popovers
// -------------------------
@tooltipColor: #fff;
@tooltipBackground: #000;
@tooltipArrowWidth: 5px;
@tooltipArrowColor: @tooltipBackground;
@popoverBackground: #fff;
@popoverArrowWidth: 10px;
@popoverArrowColor: #fff;
@popoverTitleBackground: darken(@popoverBackground, 3%);
// Special enhancement for popovers
@popoverArrowOuterWidth: @popoverArrowWidth + 1;
@popoverArrowOuterColor: rgba(0,0,0,.25);
If you are using Sass instead do the same with the Sass Variables.
如果你使用 Sass 来代替Sass Variables做同样的事情。
Sadly the TB-Customizerdoesn't have all the variables so you might have to compile it on your own.
遗憾的是，TB-Customizer没有所有变量，因此您可能必须自己编译它。
Edit:
编辑：
Good news the new Bootstrap 3 customizernow provides these options.
好消息是新的Bootstrap 3 定制器现在提供了这些选项。
回答by Brian
For anyone using a custom style.css to simply overwrite bootstrap without recompiling the LESS, the css rule you're looking for is .popover.top > .arrow:after { border-top-color: yourColorHere; }to change the color of just the arrow.
对于使用自定义 style.css 简单地覆盖引导程序而不重新编译 LESS 的任何人，您正在寻找的 css 规则是.popover.top > .arrow:after { border-top-color: yourColorHere; }仅更改箭头的颜色。
回答by Fred K
Use these variables to customize tooltips:
使用这些变量来自定义工具提示：
@tooltip-max-width: 200px;
@tooltip-color: #FFF;
@tooltip-bg: #000;
@tooltip-opacity: .9;
@tooltip-arrow-width: 5px;
@tooltip-arrow-color: #000;
Check the docs here: http://getbootstrap.com/customize/#tooltips
回答by Jacob Brewer
I was having trouble adjusting popover border thickness. To adjust this I added the @popoverBorderThickness to popovers.less, only those lines are changed. I included the whole file for context.
我在调整弹出框边框厚度时遇到了问题。为了调整这一点，我在 popovers.less 中添加了 @popoverBorderThickness，只更改了这些行。我包括整个文件的上下文。
//
// Popovers
// --------------------------------------------------
.popover {
position: absolute;
top: 0;
left: 0;
z-index: @zindexPopover;
display: none;
max-width: 276px;
padding: 1px;
text-align: left; // Reset given new insertion method
background-color: @popoverBackground;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
border: @popoverBorderThickness solid @popoverOuterColor;
.border-radius(6px);
.box-shadow(0 5px 10px rgba(0,0,0,.2));
// Overrides for proper insertion
white-space: normal;
// Offset the popover to account for the popover arrow
&.top { margin-top: -10px; }
&.right { margin-left: 10px; }
&.bottom { margin-top: 10px; }
&.left { margin-left: -10px; }
}
.popover-title {
margin: 0; // reset heading margin
padding: 8px 14px;
font-size: 14px;
font-weight: normal;
line-height: 18px;
background-color: @popoverTitleBackground;
border-bottom: 1px solid darken(@popoverTitleBackground, 5%);
.border-radius(5px 5px 0 0);
&:empty {
display: none;
}
}
.popover-content {
padding: 9px 14px;
}
// Arrows
//
// .arrow is outer, .arrow:after is inner
.popover .arrow,
.popover .arrow:after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.popover .arrow {
border-width: @popoverArrowOuterWidth;
}
.popover .arrow:after {
border-width: @popoverArrowWidth;
content: "";
}
.popover {
&.top .arrow {
left: 50%;
margin-left: -@popoverArrowOuterWidth;
border-bottom-width: 0;
border-top-color: #999; // IE8 fallback
border-top-color: @popoverArrowOuterColor;
bottom: -@popoverArrowOuterWidth;
&:after {
bottom: @popoverBorderThickness * 1.414;// longer line gets thinner use Pythagorean theorem to correct
margin-left: -@popoverArrowWidth;
border-bottom-width: 0;
border-top-color: @popoverArrowColor;
}
}
&.right .arrow {
top: 50%;
left: -@popoverArrowOuterWidth;
margin-top: -@popoverArrowOuterWidth;
border-left-width: 0;
border-right-color: #999; // IE8 fallback
border-right-color: @popoverArrowOuterColor;
&:after {
left: @popoverBorderThickness * 1.414;// longer line gets thinner use Pythagorean theorem to correct
bottom: -@popoverArrowWidth;
border-left-width: 0;
border-right-color: @popoverArrowColor;
}
}
&.bottom .arrow {
left: 50%;
margin-left: -@popoverArrowOuterWidth;
border-top-width: 0;
border-bottom-color: #999; // IE8 fallback
border-bottom-color: @popoverArrowOuterColor;
top: -@popoverArrowOuterWidth;
&:after {
top: @popoverBorderThickness * 1.414;// longer line gets thinner use Pythagorean theorem to correct
margin-left: -@popoverArrowWidth;
border-top-width: 0;
border-bottom-color: @popoverArrowColor;
}
}
&.left .arrow {
top: 50%;
right: -@popoverArrowOuterWidth;
margin-top: -@popoverArrowOuterWidth;
border-right-width: 0;
border-left-color: #999; // IE8 fallback
border-left-color: @popoverArrowOuterColor;
&:after {
right: @popoverBorderThickness * 1.414;// longer line gets thinner use Pythagorean theorem to correct
border-right-width: 0;
border-left-color: @popoverArrowColor;
bottom: -@popoverArrowWidth;
}
}
}
