ui.bootrap（plunker添付）のツールチップの矢印の色を変更してください

Question

ここはプランカコードです。 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

で、トップ

batasに関して答えを更新

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

Answer 2

ための一例を、これを試してみてください。これは私のために働いた。

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

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