造型引导工具提示上的箭头

我试图风格tootltips使用

.tooltip-inner{} 

但我有麻烦,因为我找不到如何样式工具提示小箭头。

如截图所示,工具提示的箭头是黑色的,我想添加新的颜色:

在这里输入图像说明 有什么build议?

10 Solutions collect form web for “造型引导工具提示上的箭头”

你可以用这个来改变工具提示的箭头颜色

 .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; } 
  • 更改bootstrap导航栏折叠断点而不使用LESS
  • 如何添加glyphicons到rails link_to助手 - Bootstrap 3
  • 如何使Twitter Bootstrap菜单下拉hover而不是点击
  • 如何在bootstrap中的容器内创build100%的屏幕宽度div?
  • 为什么Bootstrap 3切换到box-sizing:border-box?
  • 如何使用引导选项卡使用AJAX加载?
  • select器是做什么的?
  • 如何实现一个引导模式的加载指标,等待AJAX​​从服务器获取数据?
  • 本地安装时的无关包装
  • 在引导程序中使用容器stream体会导致水平滚动条
  • 使Bootstrappopup窗口显示/消失hover,而不是点击