Css 设置引导工具提示上箭头的样式

我正在尝试使用

.tooltip-inner{}

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

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

---

有什么建议吗？

您可以使用此选项更改工具提示箭头的颜色

.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
}

---

您始终可以尝试将此代码放入主css中，而无需修改引导文件（这是最推荐的），以便在将来更新引导文件时保持一致性

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

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

}

---

请注意，此示例适用于右侧工具提示。工具提示内部属性更改工具提示背景颜色，另一个属性更改箭头颜色

您可以添加“显示：无；”到。工具提示箭头类

.tooltip-arrow {
   display: none;
}

---

如果您想弄清楚这一点，但上面的选项都不起作用，那么您可能遇到了.tooltip与bootstrap和jquery的名称空间冲突

---

关于如何修复，请参见以下答案：

这一个对我很有用

.tooltip .tooltip-arrow {
border-top: 5px solid red !important;}

---

如果要仅设置工具提示颜色的样式，请执行以下操作：

.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.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;
}

---

要设置每个方向箭头（左、右、上和下）的样式，我们必须使用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; }

---

您需要提供更多详细信息，可能还需要提供您的问题示例，并解释您迄今为止所做的尝试。@Morpheus i不能，鼠标悬停时工具提示会淡出为什么在这一次之后实际询问时标记为重复？+1用于检索类，现在。。你是怎么用不同的颜色做的？我尝试了背景和颜色css规则，但它们似乎不起作用。您只需要将

边框底色更改为不同的颜色。感谢我所需要知道的一切，每个答案似乎都在定义，或者更确切地说，重新定义不需要的属性。您只需：.tooltip.top.tooltip arrow{border top color:#b30838；}.tooltip.left.tooltip arrow{border lef color:#b30838；}.tooltip.bottom.tooltip arrow{border bottom color:#b30838；}.tooltip.right.tooltip arrow{border right:#b308338；}.tooltip内部{背景色：#b308338；}被接受的答案对我不起作用（至少在Bootstrap3中是这样）。需要稍微修改它，即删除.bottom，只需使用.tooltip.tootip arrow{etc}+1u rock！但是你能告诉我哪些课程只用于箭头造型吗？）@不要使用TabToDigittThisNick它的图像文件你需要按照你的设计创建它…Fiddle显示得很差@Shahenery是的，但是如果你仔细看某人删除了位于的图像，请编辑你的答案并解释你显示的代码是什么，以及为什么/如何回答这个问题，这真的很有帮助。当前用于此的类是.tooltip.arrow
.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;
}

.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; }