change color of tooltip arrow of 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 someone let me know how to style these tooltips. I need to color the tooltip arrow differently for different locations of tooltip.

for e.g

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 those classes and apply the color to these tooltips.

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

}

Possible duplicate of [Styling the arrow on bootstrap tooltips](http://stackoverflow.com/questions/15383440/styling-the-arrow-on-bootstrap-tooltips) — vishnu, Jul 09 '16 at 07:34
look at this answer: http://stackoverflow.com/a/38279489/3554107. For styling each directional arrows, we have to select each arrow using CSS attribute selector and then style them individually. — vishnu, Jul 09 '16 at 07:38

score 8 · Accepted Answer · answered Dec 10 '15 at 22:42

8

Try this, example for top

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

answered Dec 10 '15 at 22:42

Bata

651
3
7

@bata- this worked. thanks. i was trying border-top-color:red – Ayesha Dec 10 '15 at 22:51

score 3 · Answer 2 · answered Dec 10 '15 at 23:05

Updating the answer with regards to batas. this 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;
}

score 0 · Answer 3 · answered Feb 15 '18 at 10:10

you can use tooltip-class i found it to be 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;
}

change color of tooltip arrow of ui.bootrap (plunker attached)

3 Answers3