Styling the arrow on bootstrap tooltips

Question

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:

enter image description here any suggestion?

You need to provide more detail, and possibly an example of your issue and an explanation of what you've tried so far. — John, Mar 13 '13 at 11:06
Why was this marked duplicate when the [other question](https://stackoverflow.com/questions/17642447/change-bootstrap-tooltip-color) was actually asked _after_ this one? — Anupam, Jun 02 '17 at 08:45

score 47 · Accepted Answer · answered Mar 13 '13 at 11:11

47

You can use this to change tooltip-arrow color

.tooltip.bottom .tooltip-arrow {
  top: 0;
  left: 50%;
  margin-left: -5px;
  border-bottom-color: #000000; /* black */
  border-width: 0 5px 5px;
}

answered Mar 13 '13 at 11:11

agriboz

4,724
4
35
49

+1 for retrieving class, now .. how do you make it in diferent color? i tryed both background and color css rules but it seems they don't works – itsme Mar 13 '13 at 11:14
3

you solely need to change `border-bottom-color` to a different color. – agriboz Mar 13 '13 at 11:17
21

Every answer seems to be defining, or rather re-defining, properties that are not needed. All you need is: .tooltip.top .tooltip-arrow{ border-top-color: #b30838; } .tooltip.left .tooltip-arrow{ border-lef-color: #b30838; } .tooltip.bottom .tooltip-arrow{ border-bottom-color: #b30838; } .tooltip.right .tooltip-arrow{ border-right-color: #b30838; } .tooltip-inner{ background-color:#b30838; } – Jim22150 Jul 11 '14 at 12:31
2

The accepted answer does not work for me (at least with Bootstrap 3). Need to modify it slightly, i.e. remove the .bottom and just use .tooltip .tootip-arrow { etc } – joedotnot Feb 15 '16 at 06:30

score 34 · Answer 2 · answered May 30 '13 at 15:17

Use this style sheet to get you started !

.tooltip{
    position:absolute;
    z-index:1020;
    display:block;
    visibility:visible;
    padding:5px;
    font-size:11px;
    opacity:0;
    filter:alpha(opacity=0)
}
.tooltip.in{
    opacity:.8;
    filter:alpha(opacity=80)
}
.tooltip.top{
    margin-top:-2px
}
.tooltip.right{
    margin-left:2px
}
.tooltip.bottom{
    margin-top:2px
}
.tooltip.left{
    margin-left:-2px
}
.tooltip.top .tooltip-arrow{
    bottom:0;
    left:50%;
    margin-left:-5px;
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-top:5px solid #000
}
.tooltip.left .tooltip-arrow{
    top:50%;
    right:0;
    margin-top:-5px;
    border-top:5px solid transparent;
    border-bottom:5px solid transparent;
    border-left:5px solid #000
}
.tooltip.bottom .tooltip-arrow{
    top:0;
    left:50%;
    margin-left:-5px;
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-bottom:5px solid #000
}
.tooltip.right .tooltip-arrow{
    top:50%;
    left:0;
    margin-top:-5px;
    border-top:5px solid transparent;
    border-bottom:5px solid transparent;
    border-right:5px solid #000
}
.tooltip-inner{
    max-width:200px;
    padding:3px 8px;
    color:#fff;
    text-align:center;
    text-decoration:none;
    background-color:#000;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px
}
.tooltip-arrow{
    position:absolute;
    width:0;
    height:0
}

score 13 · Answer 3 · edited Jun 23 '15 at 19:30

I have created fiddle for you.

Take a look at here

<p>
    <a class="tooltip" href="#">Tooltip
        <span>
            <img alt="CSS Tooltip callout"
                 src="http://www.menucool.com/tooltip/src/callout.gif" class="callout">
            <strong>Most Light-weight Tooltip</strong><br>
            This is the easy-to-use Tooltip driven purely by CSS.
        </span>
    </a>
</p>

a.tooltip {
    outline: none;
}

a.tooltip strong {
    line-height: 30px;
}

a.tooltip:hover {
    text-decoration: none;
}

a.tooltip span {
    z-index: 10;
    display: none;
    padding: 14px 20px;
    margin-top: -30px;
    margin-left: 28px;
    width: 240px;
    line-height: 16px;
}

a.tooltip:hover span {
    display: inline;
    position: absolute;
    color: #111;
    border: 1px solid #DCA;
    background: #fffAF0;
}

.callout {
    z-index: 20;
    position: absolute;
    top: 30px;
    border: 0;
    left: -12px;
}
/*CSS3 extras*/
a.tooltip span {
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-box-shadow: 5px 5px 8px #CCC;
    -webkit-box-shadow: 5px 5px 8px #CCC;
    box-shadow: 5px 5px 8px #CCC;
}

+1 u rock! but can you tell me which classes are involved only for arrow styling? ) — itsme, Mar 13 '13 at 11:19
@donotusetabtodigitthisnick its image file you need to create it as per your design... — Dipesh Parmar, Mar 13 '13 at 11:21
Fiddle displays poorly http://picpaste.com/Screen_Shot_2015-08-24_at_9.38.01_AM-tlLcxVxo.png — shaheenery, Aug 24 '15 at 16:40
@shaheenery yeah right but if you see carefully someone has deleted image located at http://www.menucool.com/tooltip/src/callout.gif — Dipesh Parmar, Aug 24 '15 at 16:55

C0ZEN · Answer 4 · 2023-06-27T13:40:10.987

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

score 9 · Answer 5 · answered Jul 09 '16 at 07:34

For styling each directional arrows(left, right,top and bottom), we have to select each arrow using CSS attribute selector and then style them individually.

Trick: Top arrow must have border color only on top side and transparent on other 3 sides. Other directional arrows also need to be styled this way.

click here for Working Jsfiddle Link

Here is the simple CSS,

.tooltip-inner { background-color:#8447cf;}

[data-placement="top"] + .tooltip > .tooltip-arrow { border-top-color: #8447cf;}

[data-placement="right"] + .tooltip > .tooltip-arrow { border-right-color: #8447cf;}

[data-placement="bottom"] + .tooltip > .tooltip-arrow {border-bottom-color: #8447cf;}

[data-placement="left"] + .tooltip > .tooltip-arrow {border-left-color: #8447cf; }

score 7 · Answer 6 · answered Jan 06 '14 at 12:04

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.

score 1 · Answer 7 · answered Feb 11 '15 at 19:08

1

This one worked for me!

.tooltip .tooltip-arrow {
border-top: 5px solid red !important;}

answered Feb 11 '15 at 19:08

zvictor

131
1
6

If you could please edit your answer and explain what the code you're showing does, and why/how that code answers the question, it could really help. – Lea Cohen Feb 12 '15 at 01:14

score 1 · Answer 8 · answered Mar 11 '15 at 22:30

If you want to style only the colors of the tooltips do as follow:

.tooltip-inner { background-color: #000; color: #fff; }
.tooltip.top .tooltip-arrow { border-top-color: #000; }
.tooltip.right .tooltip-arrow { border-right-color: #000; }
.tooltip.bottom .tooltip-arrow { border-bottom-color: #000; }
.tooltip.left .tooltip-arrow { border-left-color: #000; }

score 0 · Answer 9 · edited May 23 '17 at 10:31

0

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

edited May 23 '17 at 10:31

Community

1
1

answered Sep 29 '14 at 18:37

Stickley

4,561
3
30
29

score -2 · Answer 10 · answered Jul 10 '14 at 14:30

-2

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

.tooltip-arrow {
   display: none;
}

answered Jul 10 '14 at 14:30

Lior Bachar

103
2
8

1

The current class to use for this is .tooltip .arrow – Cameron Forward Feb 04 '19 at 06:42

Styling the arrow on bootstrap tooltips

10 Answers10

Linked