Styling the arrow on bootstrap tooltips [duplicate

Question

This question already has an answer here:

• Change bootstrap tooltip color 25 answers

I'm trying to style tootltips using

.tooltip-inner{}

But i'm having troubles cause i can't find how to style tooltip small arrow.

As shown on screenshot the arrow of the tooltip is black i want to add new color on that:

any suggestion?

Answer 1

The arrow is a border.
You need to change for each arrow the color depending on the 'data-placement' of the tooltip.

.tooltip.top .tooltip-arrow {
  border-top-color: @color;
}
.tooltip.top-left .tooltip-arrow {
  border-top-color: @color;
}
.tooltip.top-right .tooltip-arrow {
  border-top-color:@color;
}
.tooltip.right .tooltip-arrow {
  border-right-color: @color;
}
.tooltip.left .tooltip-arrow {
  border-left-color: @color;
}
.tooltip.bottom .tooltip-arrow {
  border-bottom-color: @color;
}
.tooltip.bottom-left .tooltip-arrow {
  border-bottom-color: @color;
}
.tooltip.bottom-right .tooltip-arrow {
  border-bottom-color: @color;
}
.tooltip > .tooltip-inner {
  background-color: @color;
}

Answer 2

You can add 'display: none;' to .tooltip-arrow class

.tooltip-arrow {
   display: none;
}

Answer 3

In case you are going around and around to figure this out and none of the options above are working, it is possible you are experiencing a name space conflict of .tooltip with bootstrap and jquery.

See this answer on how to fix: jQueryUI Tooltips are competing with Twitter Bootstrap

Answer 4

You can always try putting this code in your main css without modifying the bootstrap file what is most recommended so you keep consistency if in a future you update the bootstrap file.

.tooltip-inner {
background-color: #FF0000;
}

.tooltip.right .tooltip-arrow {
border-right: 5px solid #FF0000;

}

Notice that this example is for a right tooltip. The tooltip-inner property changes the tooltip BG color, the other one changes the arrow color.