CSS 设置引导工具提示上的箭头样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15383440/
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
Styling the arrow on bootstrap tooltips
提问by itsme
I'm trying to style tootltips using
我正在尝试使用
.tooltip-inner{}
But i'm having troubles cause i can't find how to style tooltip small arrow.
但是我遇到了麻烦，因为我找不到如何设置工具提示小箭头的样式。
As shown on screenshot the arrow of the tooltip is black i want to add new color on that:
如屏幕截图所示，工具提示的箭头是黑色的，我想在其上添加新颜色：
any suggestion?
有什么建议吗？
回答by agriboz
You can use this to change tooltip-arrow color
您可以使用它来更改工具提示箭头颜色
.tooltip.bottom .tooltip-arrow {
top: 0;
left: 50%;
margin-left: -5px;
border-bottom-color: #000000; /* black */
border-width: 0 5px 5px;
}
回答by Charles-Philippe Girard
Use this style sheet to get you started !
使用此样式表帮助您入门！
.tooltip{
position:absolute;
z-index:1020;
display:block;
visibility:visible;
padding:5px;
font-size:11px;
opacity:0;
filter:alpha(opacity=0)
}
.tooltip.in{
opacity:.8;
filter:alpha(opacity=80)
}
.tooltip.top{
margin-top:-2px
}
.tooltip.right{
margin-left:2px
}
.tooltip.bottom{
margin-top:2px
}
.tooltip.left{
margin-left:-2px
}
.tooltip.top .tooltip-arrow{
bottom:0;
left:50%;
margin-left:-5px;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:5px solid #000
}
.tooltip.left .tooltip-arrow{
top:50%;
right:0;
margin-top:-5px;
border-top:5px solid transparent;
border-bottom:5px solid transparent;
border-left:5px solid #000
}
.tooltip.bottom .tooltip-arrow{
top:0;
left:50%;
margin-left:-5px;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-bottom:5px solid #000
}
.tooltip.right .tooltip-arrow{
top:50%;
left:0;
margin-top:-5px;
border-top:5px solid transparent;
border-bottom:5px solid transparent;
border-right:5px solid #000
}
.tooltip-inner{
max-width:200px;
padding:3px 8px;
color:#fff;
text-align:center;
text-decoration:none;
background-color:#000;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px
}
.tooltip-arrow{
position:absolute;
width:0;
height:0
}
回答by Dipesh Parmar
I have created fiddle for you.
我为你创造了小提琴。
Take a look at here
看一眼 here
<p>
<a class="tooltip" href="#">Tooltip
<span>
<img alt="CSS Tooltip callout"
src="http://www.menucool.com/tooltip/src/callout.gif" class="callout">
<strong>Most Light-weight Tooltip</strong><br>
This is the easy-to-use Tooltip driven purely by CSS.
</span>
</a>
</p>
a.tooltip {
outline: none;
}
a.tooltip strong {
line-height: 30px;
}
a.tooltip:hover {
text-decoration: none;
}
a.tooltip span {
z-index: 10;
display: none;
padding: 14px 20px;
margin-top: -30px;
margin-left: 28px;
width: 240px;
line-height: 16px;
}
a.tooltip:hover span {
display: inline;
position: absolute;
color: #111;
border: 1px solid #DCA;
background: #fffAF0;
}
.callout {
z-index: 20;
position: absolute;
top: 30px;
border: 0;
left: -12px;
}
/*CSS3 extras*/
a.tooltip span {
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-moz-box-shadow: 5px 5px 8px #CCC;
-webkit-box-shadow: 5px 5px 8px #CCC;
box-shadow: 5px 5px 8px #CCC;
}
回答by Matias
You can always try putting this code in your main css without modifying the bootstrap file what is most recommended so you keep consistency if in a future you update the bootstrap file.
您始终可以尝试将此代码放入主 css 中，而无需修改最推荐的引导程序文件，以便在将来更新引导程序文件时保持一致性。
.tooltip-inner {
background-color: #FF0000;
}
.tooltip.right .tooltip-arrow {
border-right: 5px solid #FF0000;
}
Notice that this example is for a right tooltip. The tooltip-inner property changes the tooltip BG color, the other one changes the arrow color.
请注意，此示例适用于正确的工具提示。tooltip-inner 属性更改工具提示 BG 颜色，另一个更改箭头颜色。
回答by C0ZEN
The arrow is a border.
You need to change for each arrow the color depending on the 'data-placement' of the tooltip.
箭头是边框。
您需要根据工具提示的“数据位置”更改每个箭头的颜色。
.tooltip.top .tooltip-arrow {
border-top-color: @color;
}
.tooltip.top-left .tooltip-arrow {
border-top-color: @color;
}
.tooltip.top-right .tooltip-arrow {
border-top-color:@color;
}
.tooltip.right .tooltip-arrow {
border-right-color: @color;
}
.tooltip.left .tooltip-arrow {
border-left-color: @color;
}
.tooltip.bottom .tooltip-arrow {
border-bottom-color: @color;
}
.tooltip.bottom-left .tooltip-arrow {
border-bottom-color: @color;
}
.tooltip.bottom-right .tooltip-arrow {
border-bottom-color: @color;
}
.tooltip > .tooltip-inner {
background-color: @color;
}
回答by vishnu
For styling each directional arrows(left, right,top and bottom), we have to select each arrow using CSS attribute selectorand then style them individually.
为了给每个方向箭头（左、右、上和下）设置样式，我们必须使用CSS 属性选择器选择每个箭头，然后单独设置它们的样式。
Trick:Top arrow must have border color only on top side and transparent on other 3 sides. Other directional arrows also need to be styled this way.
技巧：顶部箭头必须仅在顶部有边框颜色，其他 3 侧必须是透明的。其他方向箭头也需要以这种方式设置样式。
click here for Working Jsfiddle Link
Here is the simple CSS,
这是简单的CSS，
.tooltip-inner { background-color:#8447cf;}
[data-placement="top"] + .tooltip > .tooltip-arrow { border-top-color: #8447cf;}
[data-placement="right"] + .tooltip > .tooltip-arrow { border-right-color: #8447cf;}
[data-placement="bottom"] + .tooltip > .tooltip-arrow {border-bottom-color: #8447cf;}
[data-placement="left"] + .tooltip > .tooltip-arrow {border-left-color: #8447cf; }
回答by Oscar
If you want to style only the colors of the tooltips do as follow:
如果您只想设置工具提示颜色的样式，请执行以下操作：
.tooltip-inner { background-color: #000; color: #fff; }
.tooltip.top .tooltip-arrow { border-top-color: #000; }
.tooltip.right .tooltip-arrow { border-right-color: #000; }
.tooltip.bottom .tooltip-arrow { border-bottom-color: #000; }
.tooltip.left .tooltip-arrow { border-left-color: #000; }
回答by zvictor
This one worked for me!
这个对我有用！
.tooltip .tooltip-arrow {
border-top: 5px solid red !important;}
回答by Stickley
In case you are going around and around to figure this out and none of the options above are working, it is possible you are experiencing a name space conflictof .tooltip with bootstrap and jquery.
如果您四处寻找解决办法，但上述选项均无效，则您可能会遇到.tooltip 与 bootstrap 和 jquery的名称空间冲突。
See this answer on how to fix: jQueryUI Tooltips are competing with Twitter Bootstrap
请参阅有关如何修复的答案：jQueryUI 工具提示正在与 Twitter Bootstrap 竞争
回答by Lior Bachar
You can add 'display: none;' to .tooltip-arrow class
您可以添加“显示：无；” 到 .tooltip-arrow 类
.tooltip-arrow {
display: none;
}
