更改ui.bootrap的工具提示箭头的颜色(附带的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

}

Answer 1

试试这个,顶部的例子

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