造型引导工具提示上的箭头
我试图风格tootltips使用
.tooltip-inner{} 但我有麻烦，因为我找不到如何样式工具提示小箭头。
如截图所示，工具提示的箭头是黑色的，我想添加新的颜色：
有什么build议？
你可以用这个来改变工具提示的箭头颜色
.tooltip.bottom .tooltip-arrow { top: 0; left: 50%; margin-left: -5px; border-bottom-color: #000000; /* black */ border-width: 0 5px 5px; }
使用这个样式表让你开始！
.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 }
我为你创造了一个小提琴。
看看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; }
你总是可以尝试把这个代码放在你的main css中，而不用修改bootstrap文件，这是最值得推荐的，所以如果你将来更新bootstrap文件的时候保持一致。
.tooltip-inner { background-color: #FF0000; } .tooltip.right .tooltip-arrow { border-right: 5px solid #FF0000; }
注意这个例子是为了一个正确的工具提示。 tooltip-inner属性改变工具提示BG颜色，另一个改变箭头颜色。
箭头是一个边框。
您需要根据工具提示的“数据放置”来更改每个箭头的颜色。
.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; }
为了devise每个方向箭头的样式（左，右，上，下），我们必须使用CSS属性select器来select每个箭头，然后单独设置样式。
绝招：顶部的箭头必须只有边框颜色在上面，其他三面都是透明的。 其他方向箭头也需要这样的样式。
点击这里工作Jsfiddle链接
这里是简单的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; }
如果您只想设置工具提示的颜色，请按以下步骤操作：
.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; }
这个为我工作！
.tooltip .tooltip-arrow { border-top: 5px solid red !important;}
如果你正在四处寻找这个问题，上面的选项都不起作用，那么你可能遇到了与bootstrap和jquery的.tooltip 命名空间冲突 。
看到这个答案如何解决： jQueryUI工具提示与Twitter Bootstrap竞争
你可以添加'display：none' 到.tooltip-arrow类
.tooltip-arrow { display: none; }
