Change the color of the tooltip arrow ui.bootrap (plunker attached)

Question

here is the plunker code. http://plnkr.co/edit/C1khFJqTUutDaK9ad7ud?p=preview

I need to change the tooltip arrow. The position of the tooltips in the example is top, bottom, and left.

Can anyone let me know how to style these tooltips. I need to color the tooltip arrow differently for different places in the tooltip.

eg,

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

Can someone let me know how to get these classes and apply color to these tips.

Here is the code

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

Try this for example for the top

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

Answer 2

Update answer regarding batas. it worked for me.

 .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

you can use tooltip-class , I found it more convenient
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; }