更改ui.bootstrap工具提示箭头的颜色（附带plunker）

Question

这里是Plunker代码。 http://plnkr.co/edit/C1khFJqTUutDaK9ad7ud?p=preview 我需要更改提示箭头。示例中的工具提示位置为顶部、底部和左侧。

请问有人知道如何样式化这些工具提示吗？我需要为不同位置的工具提示以不同的颜色显示提示箭头。

例如：

tooltip at top-> arrow color should be red
tooltip at bottom-> arrow color green
tooltip at left-> arrow color yellow

请问如何获取这些类并将颜色应用于这些工具提示。

以下是代码

HTML

<div ng-controller="TooltipDemoCtrl">
<br><br><br>
  <div ng-class="{'has-error' : !inputModel}">
    <input type="text" ng-model="inputModel" class="test"
      uib-tooltip="Tooltip TBD"
      tooltip-placement="top"
      tooltip-trigger="mouseenter"
      tooltip-enable="!inputModel" />
  </div>
</div>

CSS

.tooltip .tooltip-inner {
            color: white;
            background-color: blue;
            border-radius:5px;
}

.tooltip .tooltip-arrow { 
          //cant get the class for the arrow

}

- Ayesha

---

可能是Styling the arrow on bootstrap tooltips的重复问题。 - vishnu

看看这个答案：https://dev59.com/MGUp5IYBdhLWcg3wRWFD#38279489。 为了给每个方向箭头设置样式，我们需要使用CSS属性选择器选择每个箭头，然后逐个进行样式设置。 - vishnu

Answer 1

尝试这个，顶部的示例。

.tooltip.top .tooltip-arrow {
    border-top-color: red!important;
}

- Bata

---

@bata- 这个有效。谢谢。我之前尝试的是 border-top-color:red。 - Ayesha

Answer 2

针对batas的更新答案，这对我有用。

.tooltip.top .tooltip-arrow {
border-top-color: red!important;
}
.tooltip.bottom .tooltip-arrow {
border-bottom-color: green!important;
}
.tooltip.left .tooltip-arrow {
border-left-color: yellow!important;
}

- Ayesha

Answer 3

你可以使用tooltip-class，我发现它更方便
http://plnkr.co/edit/FVTuepTS7gXL3K2ixR8e?p=preview

HTML:

<div ng-controller="TooltipDemoCtrl">
<br><br><br>
  <div ng-class="{'has-error' : !inputModel}">
    <input type="text" ng-model="inputModel" class="test"
      uib-tooltip="Tooltip TBD"
      tooltip-class="tooltip-class"
      tooltip-trigger="mouseenter"
      tooltip-enable="!inputModel" />
  </div>
</div>

CSS

.tooltip-class .tooltip-arrow{
     border-top-color: red !important;
}

- omer