Bootstrap tooltip arrow border and background color

Question

How do I change the background color and border color of the tooltip arrow? I'm using Bootstrap 4.

$(function() {
  $('[data-toggle="tooltip"]').tooltip()
})

.tooltip-main {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  font-weight: 700;
  background: #f3f3f3;
  border: 1px solid #737373;
  color: #737373;
  margin: 4px 121px 0 5px;
  float: right;
  text-align: left !important;
}

.tooltip-qm {
  float: left;
  margin: -2px 0px 3px 4px;
  font-size: 12px;
}

.tooltip-inner {
  max-width: 236px !important;
  height: 76px;
  font-size: 12px;
  padding: 10px 15px 10px 20px;
  background: #FFFFFF;
  color: rgb(0, 0, 0, .7);
  border: 1px solid #737373;
  text-align: left;
}

.tooltip.show {
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="tooltip-main" data-toggle="tooltip" data-placement="top" data-original-title="Hello world"><span class="tooltip-qm">?</span></div>

Codeply: https://www.codeply.com/go/DXTLRSDHcc

The difference between that post and this post is to identify how to change the border and background color of the arrow itself and not the toop tip. all of the answers shows that you put a border-top-color to achieve different color for the arrow. but I want to achieve different border color + background color of the arrow itself

Please don't type entirely in uppercase letters, there's really no reason to ever do this. — user229044, Nov 30 '18 at 21:01

score 4 · Accepted Answer · answered Nov 30 '18 at 21:25

4

Add another pseudo element that will cover the first one and you translate it slightly to create the needed visual

$(function() {
  $('[data-toggle="tooltip"]').tooltip()
})

.tooltip-main {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  font-weight: 700;
  background: #f3f3f3;
  border: 1px solid #737373;
  color: #737373;
  margin: 4px 121px 0 5px;
  float: right;
  text-align: left !important;
}

.tooltip-qm {
  float: left;
  margin: -2px 0px 3px 4px;
  font-size: 12px;
}

.tooltip-inner {
  max-width: 236px !important;
  height: 76px;
  font-size: 12px;
  padding: 10px 15px 10px 20px;
  background: #FFFFFF;
  color: rgb(0, 0, 0, .7);
  border: 2px solid red;
  text-align: left;
}

.tooltip.show {
  opacity: 1;
}

.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.bs-tooltip-bottom .arrow::before {
  border-bottom-color: #f00!important;
  /* Red */
}

.bs-tooltip-bottom .arrow::after {
    content: "";
    position: absolute;
    bottom: 0;
    border-width: 0 .4rem .4rem;
    transform: translateY(3px);
    border-color: transparent;
    border-style: solid;
    border-bottom-color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="tooltip-main" data-toggle="tooltip" data-placement="top" data-original-title="Hello world"><span class="tooltip-qm">?</span></div>

answered Nov 30 '18 at 21:25

Temani Afif

245,468
26
309
415

I have added your extra code but it doesn't seem to change anything. .bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before { border-bottom-color: #f00!important; /* Red */ } .bs-tooltip-bottom .arrow::after { content: ""; position: absolute; bottom: 0; border-width: 0 .4rem .4rem; transform: translateY(3px); border-color: transparent; border-style: solid; border-bottom-color: #000; } – Ibadullah Khan Nov 30 '18 at 22:06
@IbadullahKhan then check the order of the CSS you added and clear your cache – Temani Afif Nov 30 '18 at 23:19
I think this code is for tooltip bottom. I'm using tooltip top. – Ibadullah Khan Dec 01 '18 at 03:25
can you please help me with the on-going issue? I'm normally not aware of this positioning in CSS. Can you tell me how will I position "top"? Like I suppose this is for [x-placement^=bottom] bottom. – Ibadullah Khan Feb 10 '19 at 16:02
@IbadullahKhan can you share the code with the "top" position, so it's easy for me to help? – Temani Afif Feb 10 '19 at 19:08
@IbadullahKhan and what is the issue? seems like the same tooltip as here – Temani Afif Feb 10 '19 at 23:25
I want the arrow to be like this: http://prntscr.com/mjkd9u. White arrow with border-shadow on it. Whereas the sample link I've posted above shows the arrow in black with no shadow. – Ibadullah Khan Feb 11 '19 at 13:28

score 2 · Answer 2 · answered Mar 11 '19 at 22:47

I was able to get it to work doing something similar to what Temani Afif suggested. However we ended up changing over to using popovers instead so we could apply a popover-box-shadow. Bootstrap popovers are just like tooltips except they come with a border so none of that fussing with the overlapping arrows was necessary. Plus when using scss you can do the vast majority of styling just by modifying the variables.scss file.

In order to change the background color of the popover see this answer: Change bootstrap popover background color

Absolutely agree, the popover, when used without a title, is just a much better solution thanks to those SCSS variables. Great suggestion — pastullo, Apr 13 '22 at 22:07

Bootstrap tooltip arrow border and background color

2 Answers2