cambia colore della freccia del tooltip di ui.bootrap (plunker collegato)

Question

ecco il codice plunk. http://plnkr.co/edit/C1khFJqTUutDaK9ad7ud?p=preview

Ho bisogno di cambiare la freccia del suggerimento. la posizione dei tooltip nell'esempio è in alto, in basso e a sinistra.

Qualcuno può farmi sapere come definire questi suggerimenti. Ho bisogno di colorare la freccia del tooltip in modo diverso per le diverse posizioni del tooltip.

per es

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

Qualcuno può farmi sapere come ottenere le classi e applicare il colore a questi suggerimenti.

Ecco il codice

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

Prova questo, ad esempio per la parte superiore

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

Answer 2

Aggiornamento la risposta per quanto riguarda Batas. questo ha funzionato per 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

è possibile utilizzare tooltip-class ho trovato ad essere più conveniente
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; 
}