CSS-在引导工具提示上设置箭头样式

这个问题已经在这里有了答案:

  • 更改Bootstrap工具提示颜色 29个答案

我正在尝试使用以下方式设置工具提示的样式

.tooltip-inner{}

但是我遇到了麻烦,因为我找不到如何设置工具提示小箭头的样式。

如屏幕截图所示,工具提示的箭头为黑色,我想在其上添加新颜色:

enter image description here有什么建议吗?

itsme asked 2020-08-05T08:30:44Z
10个解决方案
43 votes

您可以使用它来更改工具提示箭头的颜色

.tooltip.bottom .tooltip-arrow {
  top: 0;
  left: 50%;
  margin-left: -5px;
  border-bottom-color: #000000; /* black */
  border-width: 0 5px 5px;
}
agriboz answered 2020-08-05T08:30:55Z
34 votes

使用此样式表可以帮助您入门!

.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
}
Charles-Philippe Girard answered 2020-08-05T08:31:15Z
13 votes

我为你制造了小提琴。

看看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;
}
Dipesh Parmar answered 2020-08-05T08:31:39Z
7 votes

您始终可以尝试将此代码放在主CSS中,而无需修改引导文件,这是最推荐的方式,因此,如果以后更新引导文件,则可以保持一致性。

.tooltip-inner {
background-color: #FF0000;
}

.tooltip.right .tooltip-arrow {
border-right: 5px solid #FF0000;

}

请注意,此示例用于正确的工具提示。 工具提示内部属性更改工具提示BG颜色,另一属性更改箭头颜色。

Matias answered 2020-08-05T08:32:03Z
6 votes

箭头是边框。
您需要根据工具提示的“数据位置”为每个箭头更改颜色。

.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;
}
C0ZEN answered 2020-08-05T08:32:29Z
6 votes

要设置每个方向箭头(左,右,顶部和底部)的样式,我们必须使用CSS属性选择器选择每个箭头,然后分别设置样式。

技巧:顶部箭头必须仅在顶部具有边框颜色,而在其他3侧必须具有透明颜色。 其他方向箭头也需要以这种方式设置样式。

点击这里查看工作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; }
vishnu answered 2020-08-05T08:33:05Z
2 votes

如果只想设置样式,请按照以下步骤操作:

.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; }
Oscar answered 2020-08-05T08:33:25Z
1 votes

这个为我工作!

.tooltip .tooltip-arrow {
border-top: 5px solid red !important;}
zvictor answered 2020-08-05T08:33:45Z
0 votes

如果您四处寻找解决方法,而以上任何一个选项均无效,则可能是引导程序和jquery遇到了.tooltip的名称空间冲突。

查看有关如何修复的答案:jQueryUI工具提示正在与Twitter Bootstrap竞争

Stickley answered 2020-08-05T08:34:10Z
-2 votes

您可以添加“显示:无;” 到.tooltip-arrow类

.tooltip-arrow {
   display: none;
}
Lior Bachar answered 2020-08-05T08:34:30Z
translate from https://stackoverflow.com:/questions/15383440/styling-the-arrow-on-bootstrap-tooltips