Change Bootstrap tooltip color

Question

What I'm trying to do is change the tooltip color to red. However, I also want to have multiple other colors so I don't simply want to replace the original tooltip's color.

How would I go about doing this?

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:42
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:42
**Custom styles for each tooltip** [I just posted a rather simple solution here...](https://stackoverflow.com/questions/36143382/re-color-tooltip-in-bootstrap-4/53949172#53949172) — George, Dec 27 '18 at 18:17

Praveen Kumar Purushothaman · Accepted Answer · 2021-06-24T13:33:27.683

213

You can use this way:

<a href="#" data-toggle="tooltip" data-placement="bottom"
   title="" data-original-title="Tooltip on bottom"
   class="red-tooltip">Tooltip on bottom</a>

And in the CSS:

.tooltip-arrow,
.red-tooltip + .tooltip > .tooltip-inner {background-color: #f00;}

jsFiddle

Moeen MH: With the most recent version of bootstrap, you may need to do this in order to get rid of black arrow:

.red-tooltip + .tooltip.top > .tooltip-arrow {background-color: #f00;}

Use this for Bootstrap 4:

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

Full Snippet:

$(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: rgba(0, 0, 0, .7);
  border: 1px solid #737373;
  text-align: left;
}

.tooltip.show {
  opacity: 1;
}

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

<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>
<style>
  .bs-tooltip-auto[x-placement^=bottom] .arrow::before,
  .bs-tooltip-bottom .arrow::before {
    border-bottom-color: #f00;
    /* Red */
  }
</style>

edited Jun 24 '21 at 13:33

answered Jul 14 '13 at 18:43

Praveen Kumar Purushothaman

164,888
24
203
252

Arrow color didn't change – codesnooker Feb 19 '15 at 09:27
@codesnooker If you have a new question, please ask. Don't use already existing answer and query. The main reason is, this might worked for their scenario, which not necessarily be good for you. Please ask a separate question and reference this answer. `:)` – Praveen Kumar Purushothaman Feb 19 '15 at 10:38
@PraveenKumar I didn't ask anything. I just mentioned why I down voted your answer. :) – codesnooker Feb 19 '15 at 11:12
@codesnooker Okay, lemme ask you a question. Does the fiddle work for you? – Praveen Kumar Purushothaman Feb 19 '15 at 11:14
@PraveenKumar Nope. I already check fiddle example. The array on tooltip is black. – codesnooker Feb 19 '15 at 11:21
mine's the same, black arrow :| – Alireza Feb 24 '15 at 12:14
4

Definitely still a black arrow. You need to also change the colour using `.red-tooltip + .tooltip > .tooltip-arrow {background-color: #f00;}` – Fizzix Mar 10 '15 at 06:15
1

Gawd! My bad!!! Fixed. @codesnooker didn't see that you were mentioning the **arrow**!!! Really sorry!!! – Praveen Kumar Purushothaman Mar 10 '15 at 10:03
The problem is, the arrow is an image. We can't do anything with CSS. – Praveen Kumar Purushothaman Mar 10 '15 at 10:04
@codesnooker Can you remove my downvote? I added a clarification to you. The caret here is an image, so it has to be replaced in order to make the arrow red. Got it? – Praveen Kumar Purushothaman Mar 11 '15 at 14:13
4

With the most recent version of bootstrap, you may need to do this in order to get rid of black arrow : `.red-tooltip + .tooltip.top > .tooltip-arrow {background-color: #f00;}` – Moein Mar 25 '15 at 07:02
Thanks @MoeenMH. I have added that to the answer. – Praveen Kumar Purushothaman Mar 25 '15 at 12:03
This will not work if tooltip position is right . Arrow will not show up correctly https://jsfiddle.net/ckxSs/16/ – JVK Nov 13 '15 at 19:57
4

This solution is nice if you leave the tooltip `container` option default. However, if you make the `container: "body"` so that your tooltip doesn't get clipped as overflow, this will break the css selector. – Slight May 12 '16 at 19:18
@Slight Right... So how do you want me to update the answer like? – Praveen Kumar Purushothaman May 12 '16 at 19:24
@PraveenKumar Maybe just a note stating it's not compatible with non-default `container` options? I came here looking for a solution to this that didn't involve using a custom tooltip template just to change the color so, besides that solution, I've got no good ideas on this. – Slight May 13 '16 at 21:20
1

@PraveenKumar Your answer/fiddle served a purpose for me today ;-) Had a similar problem that I couldn't figure out, so I figured I'd "Google", *as it were*. Cheers – Funk Forty Niner Dec 06 '16 at 17:46
1

@Fred-ii- Aha... :D `#Karma` – Praveen Kumar Purushothaman Dec 06 '16 at 17:53
@Slight please see my answer. It's compatible with non-default `container` option – Oleg Mar 24 '17 at 07:57

technoTarek · Answer 2 · 2014-05-08T12:47:16.040

116

Bootstrap 2

If you want to change the caret/arrow as well, do the following:

.red-tooltip + .tooltip > .tooltip-inner {background-color: #f00;}
.red-tooltip + .tooltip > .tooltip-arrow {border-bottom-color: #f00;}

or

.red-tooltip + .tooltip > .tooltip-inner, .red-tooltip + .tooltip > .tooltip-arrow {background-color: #f00;}

jsFiddle: http://jsfiddle.net/technotarek/2htZe/

UPDATE: Bootstrap 3

You have to be specific for the direction of the tooltip in Bootstrap 3. For example:

.tooltip.top .tooltip-inner {
    background-color:red;
}
.tooltip.top .tooltip-arrow {
      border-top-color: red;
}

jsFiddle for all tooltip directions using Bootstrap 3: http://jsfiddle.net/technotarek/L2rLE/

edited May 08 '14 at 12:47

answered Jul 14 '13 at 21:39

technoTarek

3,218
2
21
25

The fiddle doesn't work and I don't see the caret changing with this code. – Don Nov 20 '13 at 21:44
@Don The github refs to the css and js were no longer working; updated to use Bootstrap CDN (legacy). – technoTarek Nov 20 '13 at 23:05
None of this worked for me, but Tuyen's solution does. – Tillito Feb 28 '17 at 08:52
@technoTarek There is an issue with left, right and top placements. check the edited [jsFiddle](http://jsfiddle.net/jack4dev/g25n1stq/4/) – Anurag Mar 09 '17 at 20:59
@Anurag Your fiddle does not use the solution I provided. Here is my solution for all directions using your html and js, but my css: http://jsfiddle.net/technotarek/nhvvqz4v/ – technoTarek Mar 10 '17 at 12:40
@Tillito How so? See http://jsfiddle.net/technotarek/L2rLE/ which provides a full example for all directions. If it's not working, make sure you're using the exact same css selectors that I used. They are different for every direction. – technoTarek Mar 10 '17 at 12:41
@technoTarek Thanks for the update. Comes out that I used the old fiddle...my bad. This is working perfectly. Thanks again for the solution :) – Anurag Mar 10 '17 at 17:43

score 68 · Answer 3 · edited May 15 '17 at 01:59

68

The only way working for me:

$(document).ready(function() {
  //initializing tooltip
  $('[data-toggle="tooltip"]').tooltip();
});

.tooltip-inner {
  background-color: #00acd6 !important;
  /*!important is not necessary if you place custom.css at the end of your css calls. For the purpose of this demo, it seems to be required in SO snippet*/
  color: #fff;
}

.tooltip.top .tooltip-arrow {
  border-top-color: #00acd6;
}

.tooltip.right .tooltip-arrow {
  border-right-color: #00acd6;
}

.tooltip.bottom .tooltip-arrow {
  border-bottom-color: #00acd6;
}

.tooltip.left .tooltip-arrow {
  border-left-color: #00acd6;
}

<!--jQuery-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!--tether-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<!--Bootstrap-->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

<!--Tooltip Example-->
<div style="padding:50px;">
  <span class="fa-stack fa-lg" data-toggle="tooltip" data-placement="right" title="custom colored tooltip">hover over me
</span>
</div>

edited May 15 '17 at 01:59

Siddhant Rimal

975
2
11
32

answered May 27 '15 at 02:59

Tuyen Cao

1,065
9
9

1

The only solution that worked for me on all placements of the tooltip :). Thanks! – Anurag Mar 09 '17 at 21:00
Should have been the accepted answer. It would help the reader if you could add a jsFiddle. – Anurag Mar 10 '17 at 07:40
For a simpler version you can just add this to your css style sheet -> tooltip-inner { background-color: #773e6e !important; } .bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before { border-bottom-color: #773e6e !important; } – Ani Nov 27 '20 at 02:22
3

It works thanks. But arrow is still black, can not change it. – matasoy Feb 06 '21 at 17:25
To change the arrow simply add: .bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before { border-top-color: #00acd6 !important; } /* use top/bottom/left/right for you individual case after x-placement^ */ – CodeTrek Jun 08 '22 at 10:40

score 37 · Answer 4 · edited Nov 13 '20 at 08:38

For bootstrap4 I used code:

$('[data-toggle="tooltip"]').tooltip();

.tooltip-inner {
  background-color: #f00 !important;
  color: #f00 ;
}
.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before {
  border-top-color: #f00 !important;
}

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


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


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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>



<a title="This is an example" data-toggle="tooltip">Hover me</a>

The demo runs fine, but in .tooltip-inner you have set background-color the same as color. — iteam, Dec 10 '20 at 11:47

score 13 · Answer 5 · answered Aug 18 '15 at 20:02

Here is tooltip code in boostrap...

.tooltip {
  position: absolute;
  z-index: 1070;
  display: block;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  word-wrap: normal;
  white-space: normal;
  filter: alpha(opacity=0);
  opacity: 0;

  line-break: auto;
}
.tooltip.in {
  filter: alpha(opacity=90);
  opacity: .9;
}
.tooltip.top {
  padding: 5px 0;
  margin-top: -3px;
}
.tooltip.right {
  padding: 0 5px;
  margin-left: 3px;
}
.tooltip.bottom {
  padding: 5px 0;
  margin-top: 3px;
}
.tooltip.left {
  padding: 0 5px;
  margin-left: -3px;
}
.tooltip-inner {
  max-width: 200px;
  padding: 3px 8px;
  color: #fff;
  text-align: center;
  background-color: #000;
  border-radius: 4px;
}
.tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}
.tooltip.top .tooltip-arrow {
  bottom: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 5px 5px 0;
  border-top-color: #000;
}
.tooltip.top-left .tooltip-arrow {
  right: 5px;
  bottom: 0;
  margin-bottom: -5px;
  border-width: 5px 5px 0;
  border-top-color: #000;
}
.tooltip.top-right .tooltip-arrow {
  bottom: 0;
  left: 5px;
  margin-bottom: -5px;
  border-width: 5px 5px 0;
  border-top-color: #000;
}
.tooltip.right .tooltip-arrow {
  top: 50%;
  left: 0;
  margin-top: -5px;
  border-width: 5px 5px 5px 0;
  border-right-color: #000;
}
.tooltip.left .tooltip-arrow {
  top: 50%;
  right: 0;
  margin-top: -5px;
  border-width: 5px 0 5px 5px;
  border-left-color: #000;
}
.tooltip.bottom .tooltip-arrow {
  top: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: #000;
}
.tooltip.bottom-left .tooltip-arrow {
  top: 0;
  right: 5px;
  margin-top: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: #000;
}
.tooltip.bottom-right .tooltip-arrow {
  top: 0;
  left: 5px;
  margin-top: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: #000;
}

score 10 · Answer 6 · answered Feb 11 '15 at 19:13

10

For the arrow color, you can use this:

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

answered Feb 11 '15 at 19:13

zvictor

131
1
6

Eric Grotke · Answer 7 · 2016-11-05T07:08:41.797

10

Important to note, as of Bootstrap 4 you can customize these styles directly in your Bootstrap Sass variables file, so in _variables.scss you have these options:

//== Tooltips
//
//##

// ** Tooltip max width
$tooltip-max-width:           200px !default;
// ** Tooltip text color
$tooltip-color:               #fff !default;
// ** Tooltip background color
$tooltip-bg:                  #000 !default;
$tooltip-opacity:             .9 !default;

// ** Tooltip arrow width
$tooltip-arrow-width:         5px !default;
// ** Tooltip arrow color
$tooltip-arrow-color:         $tooltip-bg !default;

See here: http://v4-alpha.getbootstrap.com/getting-started/options/

Best to work in Sass and compile as you go with Grunt or Gulp build tools.

edited Nov 05 '16 at 07:08

answered Nov 05 '16 at 06:55

Eric Grotke

4,651
3
21
19

You can also set color using bootstrap 3 with $tooltip-color, $tooltip-bg and $tooltip-arrow-color – Woraphot Chokratanasombat Apr 30 '17 at 12:06
Super! This is a life saver :-) – Anoop Nair Sep 14 '20 at 17:46

score 9 · Answer 8 · answered Feb 24 '19 at 18:32

9

This worked for me .

.tooltip .arrow:before {
    border-top-color: #008ec3 !important;
}

.tooltip .tooltip-inner {
    background-color: #008ec3;
}

answered Feb 24 '19 at 18:32

Madian Malfi

595
1
8
26

1

None of other solutions worked for me. But, your solution worked for me. Thanks! :))) – Lim Dec 11 '19 at 05:59
Thanks. Works for me with Bootstrap 5 apart from the arrow color. Any idea for this one? – morja Sep 18 '22 at 09:47
As tooltip can appear at the top and bottom in my case (in your case it may be also left and right, so you will need to modify the code even more), I changed CSS to: `.tooltip .arrow:before { border-top-color:#008EC3 !important; } .tooltip .arrow:before { border-bottom-color:#008EC3 !important; } .tooltip .tooltip-inner { background-color:#008EC3; }` – fcunited Jul 26 '23 at 08:41

score 8 · Answer 9 · answered Dec 23 '14 at 19:07

8

my jQuery fix:

HTML:

   <a href="#" data-toggle="tooltip" data-placement="right" data-original-title="some text">
       <span class="glyphicon glyphicon-question-sign"></span>
   </a>

jQuery:

$('[data-toggle="tooltip"]').hover(function(){
    $('.tooltip-inner').css('min-width', '400px');
    $('.tooltip-inner').css('color', 'red');
});

answered Dec 23 '14 at 19:07

Dreal

162
2
8

But the arrow property not affected, how to change the arrow color? – Ali Oct 13 '21 at 14:27

score 6 · Answer 10 · answered Sep 16 '21 at 07:15

None of the above answers worked for me in Bootstrap v5.1.1. I threw together a few broken solutions and got the following working solution in pure CSS:

.tooltip-inner {
  background-color: red !important; /* Set box color to red */
  color: black !important; /* Set text color to black */
}

.tooltip.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: red; /* Set arrow color to red */
}

.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: red; /* Set arrow color to red */
}

.tooltip.bs-tooltip-start .tooltip-arrow::before {
  border-left-color: red; /* Set arrow color to red */
}

.tooltip.bs-tooltip-end .tooltip-arrow::before {
  border-right-color: red; /* Set arrow color to red */
}

Works for Bootstrap 5, thanks! – Niksr Jan 24 '22 at 09:12 — Niksr, Jan 24 '22 at 09:12

score 4 · Answer 11 · edited Mar 10 '15 at 06:59

You can use this to solve your problem. I checked it in my project and it works fine.

<a class="btn btn-sm btn-success media-tooltip" href="#" data-toggle="tooltip" data-placement="bottom" title="Download Now">Download Now</a>
    .media-tooltip + .tooltip .tooltip-inner {
        font-size: 14px; 
        font-weight: 700;
        color: rgb( 37, 207, 187 ); 
        border-width: 1px;
        border-color: rgb( 37, 207, 187 );
        border-style: solid;
        background-color: rgb( 219, 242, 239 );
        padding: 10px;
        border-radius: 0;
    } 
    .media-tooltip + .tooltip > .tooltip-arrow{display: none;}
    .media-tooltip + .tooltip .tooltip-inner:after, .media-tooltip + .tooltip .tooltip-inner:before {
         bottom: 89%;
         left: 50%;
         border: solid transparent;
         content: " ";
         height: 0;
         width: 0;
         position: absolute;
         pointer-events: none;
    }

    .media-tooltip + .tooltip .tooltip-inner:after {
        border-color: rgba(219, 242, 239, 0);
        border-bottom-color: #dbf2ef;
        border-width: 10px;
        margin-left: -10px;
    }
    .media-tooltip + .tooltip .tooltip-inner:before {
        border-color: rgba(37, 207, 187, 0);
        border-bottom-color: #25cfbb;
        border-width: 11px;
        margin-left: -11px;
    }

score 4 · Answer 12 · edited Apr 29 '18 at 07:25

This is already been answered right but i think i should give my opinion too. Like cozen says this is a border, and for it to work you must specify the classes to format this in the same way that bootstrap specifies it. So, you can do this

.tooltip .tooltip-inner {background-color: #00a8c4; color: black;} 
.tooltip.top .tooltip-arrow {border-top-color: #00a8c4;}

or you can do the next one, just for the tooltip-arrow but you must add the !important, so that it overwrites the bootstrap css

.tooltip-arrow {border-top-color: #00a8c4!important;}

score 4 · Answer 13 · answered Jun 07 '19 at 20:22

BootStrap 4

When using BootStrap 4 the tooltip is appended to the bottom of the body tag. If your tooltip is a child of another tag there is no way to target the tooltip using css. The only way I've found that works is using the inserted.bs.tooltip event and adding a class to the inner div and the arrow. Then you can target the class in css.

// initialize tooltips
$('[data-toggle="tooltip"]').tooltip(); 

// Add the classes to the toolip when it is created
$('[data-toggle="tooltip"]').on('inserted.bs.tooltip',function () {
    var thisClass = $(this).attr("class");
    $('.tooltip-inner').addClass(thisClass);
    $('.arrow').addClass(thisClass + "-arrow");
});

/* style the tooltip box and arrow based on your class*/
.bs-tooltip-left .redTip {
    background-color: red !important
}
.bs-tooltip-left .redTip-arrow::before {
    border-left-color: red !important
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<p>Show a red tooltip <a href="#" class="redTip" data-toggle="tooltip" data-placement="left" title="You Did It!">Hover over me</a></p>

This is the working solution for Bootstrap 4. Tip: If you, like me, is using the tooltip trigger manual (ie. tooltip always visible), use any other html attribute, because using 'data-toggle' will trigger the show/hide event with mouse hover. — Bruno Morais, Jan 23 '20 at 12:22

score 3 · Answer 14 · answered Mar 24 '17 at 07:56

Non of above answers works fine in case of container: 'body', and the following solution does:

// Assign custom CSS class after the tooltip template has been added to the DOM
$(document).on('inserted.bs.tooltip', function(e) {
    var tooltip = $(e.target).data('bs.tooltip');
    tooltip.$tip.addClass($(e.target).data('tooltip-custom-class'));
});

And a simple CSS snippet:

.tooltip.tooltip-danger > .tooltip-inner {
    background-color: #d9534f;
}

.tooltip.tooltip-danger.left > .tooltip-arrow {
    border-left-color: #d9534f;
}

Now you can init your tooltip as a usual, passing custom CSS class via data-tooltip-custom-class attribute:

<span class="js-tooltip">Hover me totally</span>

<script>
$('.js-tooltip')
    .data('tooltip-custom-class', 'tooltip-danger')
    .tooltip(/*your options*/)
;
</script>

score 3 · Answer 15 · answered Mar 12 '18 at 09:33

3

Seems to have changed in Bootstrap 4

If you want to change color of a bottom placed tooltip in red, just add this to your CSS :

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

.bs-tooltip-bottom .arrow::before {
    border-bottom-color: #f00;
}

answered Mar 12 '18 at 09:33

David

550
5
7

score 3 · Answer 16 · answered Jan 12 '22 at 14:06

None of all the answers worked for me but just in case someone still needs an answer, this might help as this one worked on me (I'm using bootstrap 5).

.tooltip-inner {
background-color: #7575FF !important;
color: #7575FF;
box-shadow: 0px 0px 4px black;
opacity: 1 !important;
}
.bs-tooltip-end .tooltip-arrow::before{
border-right-color: #7575FF !important;
}
.bs-tooltip-bottom .tooltip-arrow::before{
    border-bottom-color: #7575FF !important;
}
.bs-tooltip-start .tooltip-arrow::before{
    border-left-color: #7575FF !important;
}
.bs-tooltip-top .tooltip-arrow::before{
    border-top-color: #7575FF !important;
}

you will only need the .bs-tooltip-bottom .tooltip-arrow::XXXX that corresponds to the tooltip you are using. — Mbotet, Jan 17 '23 at 12:03

score 3 · Answer 17 · answered Aug 15 '22 at 22:24

Since Bootstrap 5.2, tooltips can be configured through CSS variables.

new bootstrap.Tooltip(document.querySelector('[data-bs-toggle="tooltip"]'));
// initialize tooltip

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<style>
.tooltip-success {
  --bs-tooltip-bg: var(--bs-success); /* or hardcode any color */
}
</style>
<button type="button" class="btn btn-success" data-bs-toggle="tooltip" 
  data-bs-custom-class="tooltip-success" 
  data-bs-title="Some tooltip title" data-bs-placement="bottom">
  Success tooltip
</button>

score 2 · Answer 18 · edited May 23 '17 at 12:34

You can use the quickapproach mentioned in other answers if you just want to change color. However if you are using Bootstrap than you should use themes so that look and feel is consistent. Unfortunately there is no built-in support for themes for Bootstrap so I wrote little piece of CSS that does this. You basically get tooltip-info, tooltip-warning etc classes that you can add to the element to apply theme.

You can find this code along with fiddle, examples and more explanation in this answer: https://stackoverflow.com/a/20880312/207661

score 2 · Answer 19 · edited Dec 07 '15 at 11:32

2

You can use this way:

And in the CSS:

.tooltip-arrow,
.red-tooltip + .tooltip > .tooltip-inner {background-color: #000;}

edited Dec 07 '15 at 11:32

CoderPi

12,985
4
34
62

answered Dec 07 '15 at 11:14

Sandip

21
2

C0ZEN · Answer 20 · 2016-01-15T23:56:35.423

The arrow is a border.
You need to change for each arrow the color corresponding.

.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;
  font-size: @font-size-small;
}

However If i want to add a class to change the color (like in the fiddle with '.class + .tooltip...' it doesn't work (bootstrap 3).
If someone know how to handle that ?!?

score 2 · Answer 21 · answered Mar 15 '16 at 11:06

2

Bootstrap 3 + SASS for bottom tooltip :

.red-tooltip {
    & + .tooltip.bottom {
          .tooltip-inner{background-color:$red;}
          .tooltip-arrow {border-bottom-color: $red;}
    }
}

answered Mar 15 '16 at 11:06

Bertrand

1,000
1
9
20

score 2 · Answer 22 · answered Oct 15 '16 at 21:13

2

For the arrow, first confirm that which direction you are using. For example, i am using left direction, then it should be

.tooltip .tooltip-inner {
    background-color:#2fa5fb;
}
.tooltip.left > .tooltip-arrow {
   border-left-color: #2fa5fb;
}

answered Oct 15 '16 at 21:13

Amir Iqbal

831
11
28

score 2 · Answer 23 · answered Mar 12 '20 at 11:22

Here's a SCSS code (compiled css below) that will help you to easily control the tooltip colors, including the arrow (border and background for the arrow as well):

Note: you might need to add "important" in some places in order for the CSS rules to take effect. Note #2: the style here only works for TOP and BOTTOM tooltip layouts. Feel free to add some more styling (&.bs-tooltip-left, &.bs-tooltip-right, etc)

SCSS:

$tt-text-color: lime;
$tt-border-color: lime;
$tt-bg-color: black;
$arrow-border-color: lime;
$arrow-bg-color: black;

.tooltip {
  .tooltip-inner {
    background: $tt-bg-color;
    color: $tt-text-color;
    border: 2px solid $tt-border-color;
  }
  .arrow {
    width: 11px;
    height: 11px;
    border: 2px solid $arrow-border-color;
    bottom: 1px;
    &:before {
      width: 11px;
      height: 11px;
      background: $arrow-bg-color;
      border: 0;
    }
  }
  &.bs-tooltip-top {
    .arrow {
      transform: rotate(-135deg);
    }
  }
  &.bs-tooltip-bottom {
    .arrow {
      transform: rotate(135deg);
      top: 2px;
    }
  }
}

CSS:

.tooltip .tooltip-inner {
  background: black;
  color: lime;
  border: 2px solid lime;
}
.tooltip .arrow {
  width: 11px;
  height: 11px;
  border: 2px solid lime;
  bottom: 1px;
}
.tooltip .arrow:before {
  width: 11px;
  height: 11px;
  background: black;
  border: 0;
}
.tooltip.bs-tooltip-top .arrow {
  transform: rotate(-135deg);
}
.tooltip.bs-tooltip-bottom .arrow {
  transform: rotate(135deg);
  top: 2px;
}

Live Example:

jQuery(document).ready(function(){
 $('a').tooltip();
});

.tooltip .tooltip-inner {
  background: black;
  color: lime;
  border: 2px solid lime;
}
.tooltip .arrow {
  width: 11px!important;
  height: 11px!important;
  border: 2px solid lime;
  bottom: 1px;
}
.tooltip .arrow:before {
  width: 11px;
  height: 11px;
  background: black;
  border: 0;
}
.tooltip.bs-tooltip-top .arrow {
  transform: rotate(-135deg);
}
.tooltip.bs-tooltip-bottom .arrow {
  transform: rotate(135deg);
  top: 2px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>

<div class="text-center py-4">
<a class="cn-box big cn-copy" data-toggle="tooltip" data-placement="bottom" title="Hello There">
  try me
</a>
</div>

score 2 · Answer 24 · edited Nov 12 '20 at 23:16

In Bootstrap 3 (not tested in 4) you can override default colors with using a template when creating the tooltip. With this method you can specify tooltip colors runtime:

var bgColor = '#dd0000'; //red
var textColor = '#ffffff'; //white

$('#yourControlId').tooltip({
    placement: "top",
    template: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow" style="border-top-color:' + bgColor + ';"></div><div class="tooltip-inner" style="background-color:' + bgColor + ';color:' + textColor + ';"></div></div>'
});

The template is based on original tooltip template. I only added the color styles. The placement must be top, because of arrow styling. (I haven't tried other placement types)

score 2 · Answer 25 · answered Oct 12 '22 at 12:13

BOOTSTRAP 5

.tooltip-inner{
      background-color: #fff !important;
      color: #666 !important;
      border: 1px solid #ddd;
    }
    .bs-tooltip-end .tooltip-arrow::before{
      border-right-color: #ddd !important;
    }
    .bs-tooltip-bottom .tooltip-arrow::before{
      border-bottom-color: #ddd !important;
    }
    .bs-tooltip-start .tooltip-arrow::before{
      border-left-color: #ddd !important;
    }
    .bs-tooltip-top .tooltip-arrow::before{
      border-top-color: #ddd !important;
    }

score 1 · Answer 26 · answered Jun 29 '16 at 08:59

$(document).ready(function(){
  $('.tooltips-elements')
    .tooltip()
    .each(function() {
        var color = $(this).data('color');
        $(this).hover(function(){
         var aria = $(this).attr('aria-describedby');
         $('#' + aria).find('.tooltip-inner').css({
          "background": color,
          "color" : "#333",
          "margin-left" : "10px",
          "font-weight" : "700",
          "font-family" : "Open Sans",
          "font-size" : "13px",
         });
         $('#' + aria).find('.tooltip-arrow').css({
          "border-bottom-color" : color,
         });
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>


<a href="#" class="tooltips-elements" data-toggle="tooltip"  data-placement="bottom" data-original-title="Here comes the tooltip" data-color="red">Hover me</a>

Check this maybe it can help you. You can have multiple tooltips color.

score 1 · Answer 27 · edited Apr 26 '18 at 01:18

1

It will change the color of the tooltip in bootstrap4 you can use bottom, left, right to add CSS for respective in place of top in .bs-tooltip-top

.tooltip-inner {
background-color: #00acd6 !important;
color: #fff;
}
.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] 
.arrow::before {
border-top-color: #00acd6;
}

edited Apr 26 '18 at 01:18

Pang

9,564
146
81
122

answered Apr 25 '18 at 08:06

Manish

29
3

bootstrap 4 working please check the placement of CSS. – Manish Apr 25 '18 at 08:07
explain your answer little bit. it could help to others – coder Apr 25 '18 at 08:27

score 1 · Answer 28 · answered Sep 28 '22 at 19:44

For Bootstrap 5 Tooltip Code

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl, {
    'customClass': 'custom-tooltip',
  })
})

.custom-tooltip .tooltip-inner {
  background-color: #2f4fff;
  text-align: left;
  max-width: 500px;
}

.custom-tooltip.bs-tooltip-top .tooltip-arrow::before,
.custom-tooltip.bs-tooltip-auto[x-placement^="top"] .tooltip-arrow::before {
  border-top-color: #2f4fff !important;
}

.custom-tooltip.bs-tooltip-end .tooltip-arrow::before,
.custom-tooltip.bs-tooltip-auto[x-placement^="end"] .tooltip-arrow::before {
  border-right-color: #2f4fff !important;
}

.custom-tooltip.bs-tooltip-bottom .tooltip-arrow::before,
.custom-tooltip.bs-tooltip-auto[x-placement^="bottom"] .tooltip-arrow::before {
  border-bottom-color: #2f4fff !important;
}

.custom-tooltip.bs-tooltip-start .tooltip-arrow::before,
.custom-tooltip.bs-tooltip-auto[x-placement^="start"] .tooltip-arrow::before {
  border-left-color: #2f4fff !important;
}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.css" rel="stylesheet"/>
<div class="m-5 container">


  <span data-bs-toggle="tooltip" data-bs-placement="auto" data-bs-html="true" title="The tooltip text<br/>Extra text">
    [Custom]
  </span>

</div>

score 1 · Answer 29 · answered Oct 20 '22 at 07:48

1

This works for me in Bootstrap 5:

.tooltip .tooltip-inner {
    --bs-tooltip-bg: #4d8bb7;
}
.tooltip .tooltip-arrow::before {
    --bs-tooltip-bg: #4d8bb7;
}

answered Oct 20 '22 at 07:48

morja

8,297
2
39
59

score 0 · Answer 30 · answered Apr 24 '15 at 12:51

0

The only way working for me:

.tooltip.bottom .tooltip-arrow{
    border-bottom-color:#F00;
}

answered Apr 24 '15 at 12:51

Vivien

1,159
2
14
34

score 0 · Answer 31 · answered Nov 03 '16 at 20:38

We are using bootstrap 3.0 on our website, but none of the above steps worked in updating the styling of the tooltip. But I did find a solution using jQueryUI styling instead

https://jqueryui.com/tooltip/#custom-style

CSS

  .ui-tooltip, .arrow:after {
    background: black;
    border: 2px solid white;
  }
  .ui-tooltip {
    padding: 10px 20px;
    color: white;
    border-radius: 20px;
    font: bold 14px "Helvetica Neue", Sans-Serif;
    text-transform: uppercase;
    box-shadow: 0 0 7px black;
  }

HTML

<div class="qu_help" data-toggle="tooltip" title="Some Random Title"> 
   <span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>
</div>

I'm adding this answer in case someone else is in a similar situation as I was.

score 0 · Answer 32 · edited Jun 20 '20 at 09:12

This easy method works for me when i want to change the background color of the bootstrap tooltips:

$(function(){
    //$('.tooltips.red-tooltip').tooltip().data('bs.tooltip').tip().addClass('red-tooltip');
    $('.tooltips.red-tooltip').tooltip().data('tooltip').tip().addClass('red-tooltip');
});

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

<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-tooltip.js"></script>

<a href="#" data-toggle="tooltip" data-placement="bottom"
   title="" data-original-title="Made by @Ram"
   class="tooltips red-tooltip">My link with red tooltip</a>

jsfiddle Live Demo

Note A:

If js code include .data('tooltip') not working for you then please comment its line and uncomment js code include .data('bs-tooltip').

Note B:

If your bootstrap tooltip function add a tooltip to the end of body (not right after the element), my solution works well yet but some other answers in this pages did not works like @Praveen Kumar and @technoTarek in this scenario.

Note C:

This codes support tooltip arrow color in all placements of the tooltip (top,bottom,left,right).

score 0 · Answer 33 · answered Feb 21 '17 at 17:02

0

If you want to use jQuery you can try this:

$('[data-toggle="tooltip"]').on('shown.bs.tooltip', function(){
    $('.tooltip.bottom .tooltip-arrow').css('border-bottom-color', 'red');
    $('.tooltip-inner').css('background-color', 'red');
});

answered Feb 21 '17 at 17:02

Indra S

1
1

score 0 · Answer 34 · answered Jul 22 '17 at 18:56

For Bootstrap 4 with dependency on tether.js the .tooltip-arrow classes have been replaced with .tooltip.bs-tether-element-attached-[position]{...}

Here is how I changed color and thickened bottom arrow. For every pixel added to border-width, I had to subtract a pixel from "bottom" position.

.tooltip.bs-tether-element-attached-bottom .tooltip-inner::before, .tooltip.tooltip-bottom .tooltip-inner::before {

    border-top-color: #d19b3d !important;
    border-width: 10px 10px 0;
    bottom: -5px;
}

You'll have to adjust for other positions, i.e. for .tooltip.bs-tether-element-attached-left you would adjust border-right, and reposition if raising border-width by subtracting pixels from "left", etc.

I neglected to mention one other aspect: If raising border width of tether element, also need to reposition back to center using margin style, so to change from default 5px to 10px border I had to also change default margin-left: -5px; to margin-left: -10px; — deusoz, Jul 22 '17 at 19:04

score 0 · Answer 35 · answered Jun 10 '18 at 21:35

Oleg's answer https://stackoverflow.com/a/42994192/9921853 is the best there. It allows to apply the tooltip styles to the dynamically created elements. However it doesn't work for Bootstrap 4. It should be slightly modified:

Bootstrap 3:

$(document).on('inserted.bs.tooltip', function(e) {
    var tooltip = $(e.target).data('bs.tooltip');
    tooltip.$tip.addClass($(e.target).data('tooltip-custom-class'));
});

Example: https://www.bootply.com/UORR04ncTP

Bootstrap 4:

$(document).on('inserted.bs.tooltip', function(e) {
    var tooltip = $(e.target).data('bs.tooltip');
    $(tooltip.tip).addClass($(e.target).data('tooltip-custom-class'));
});

Example: https://jsfiddle.net/nsmcan/naq530hx

Full Solution (Bootstrap 3)

JS

$(document).on('inserted.bs.tooltip', function(e) {
    var tooltip = $(e.target).data('bs.tooltip');
    tooltip.$tip.addClass($(e.target).data('tooltip-custom-classes'));
});

$('body').tooltip({ 
    selector: "[title]", 
    html: true
});

HTML

<h1>Test tooltip styling</h1>
<div><span title="Long-long-long tooltip doesn't fit the single line">Hover over me 1</span></div>
<div><span data-tooltip-custom-classes="tooltip-left" data-container="body" title="Example (left aligned):<br>Tooltip doesn't fit the single line, and is not a sibling">Hover over me 2</span></div>
<div><span class="text-danger" data-tooltip-custom-classes="tooltip-large tooltip-left tooltip-danger" title="Example (left aligned):<br>This long text we want to have in the single line">Hover over me 3</span></div>

CSS

.tooltip.tooltip-large > .tooltip-inner {
    max-width: 300px;
}
.tooltip.tooltip-left > .tooltip-inner {
    text-align: left;
}

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

score 0 · Answer 36 · answered Feb 13 '19 at 11:18

for Bootstrap 4 version via CSS:

if you want to change the background color of balloon:

/* change style balloon */
.tooltip-inner {
    background-color: green !important;
    color: #fff;
}

if you want to change the arrow when appear in bottom position:

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

Hope help you

klewis · Answer 37 · 2019-03-13T11:58:54.233

Within your BS4 project, if you are able to compile SASS code, you can take advantage of creating a mixin to manage the color scheme of tooltips from any direction.

Benefits of this approach:

You don't have to add on additional javaScript/jQuery for something that involves styling.
You leverage SASS to dynamically handle the branding for you.
You can easily control which tooltips have what color(s) and direction(s).

Here's one of many ways in which you can implement this:

Create your original mixin:

Provide a variable for a color
Set 2 parameters (one for the custom class name of your tooltip, and the other for the color). I also add default values for these parameters (optional).

Create a list and loop over it to cover all 4 possible directions

//define a color
$m-color-blue: #004c97;

//create a mixin with parameters and default value
@mixin m-tooltip-color-direction($name:'.mtootltip', $color:$m-color-blue) {

//reference your custom class name
#{$name} {
    .tooltip-inner {
        background-color: $color;
    }

    //create a list of possible directions
    $directions: top bottom left right;

    //loop through the list
    @each $direction in $directions {
        &.bs-tooltip-#{$direction} .arrow:before,
         .bs-tooltip-auto[x-placement^="$direction"] .arrow:before {
            border-#{$direction}-color: $color !important;
        }
     }
  }
}

Call your mixin (adjust class name and color)

Within your main .scss file call your mixin like so:

@include m-tooltip-color-direction('.mtooltip', $m-color-blue);

Set your BS4 Tooltip in your layout (adjust direction)

Finally, add a BS4 tooltip to your layout, and give it a custom class for flexibility. This BS4 resource talks about using template as an option. We'll be using that to add our custom class.

The following example adds a tooltip on an info icon badge:

 <span class="badge badge-pill badge-primary" data-toggle="tooltip" data-placement="right" data-html="true" data-template="<div class='tooltip mtooltip' role='tooltip'><div class='arrow'></div><div class='tooltip-inner'></div></div>" title="<h1 class='text-white'>Tooltip</h1> on bottom">i</span>

With this setup you can adjust the class name, color and direction of your tooltip without touching your original mixin. How cool is that :)

Hope this helps!

score 0 · Answer 38 · answered Nov 07 '19 at 15:52

0

This is true solution

^_^

.tooltip { 
    font-family: inherit; 
} 
.tooltip-inner { 
    background-color: #5264e9; 
}
.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.bs-tooltip-bottom .arrow::before { 
    border-bottom-color: #5264e9;
}

answered Nov 07 '19 at 15:52

Alaa Krunb

9
1

score 0 · Answer 39 · answered May 16 '22 at 13:13

BOOTSTRAP 5:

This is HTML markup generated by Bootstrap as written in documentation:

<!-- Generated markup by the plugin -->
<div class="tooltip bs-tooltip-top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

To change style you need to change properties of these classes like this:

Main box:

.tooltip-inner {
    background: rgba(#333, 0.95);
    color: #ddd;
}

Arrow:

.bs-tooltip-end > .tooltip-arrow::before {
    border-right-color: rgba(#333, 0.95); 
}

.bs-tooltip-top > .tooltip-arrow::before {
    border-top-color: rgba(#333, 0.95); 
}

.bs-tooltip-start > .tooltip-arrow::before {
    border-left-color: rgba(#333, 0.95); 
}

.bs-tooltip-bottom > .tooltip-arrow::before {
    border-bottom-color: rgba(#333, 0.95); 
}

score -1 · Answer 40 · answered Aug 10 '20 at 20:03

If you want to customize the tooltip as white background with black text, We can go through this. Here we are using tooltip with anchor tag

<div id='container-light' class='tooltip-light'>
<a href="#" data-container='#container-light' data-toggle="tooltip" title="Tooltip text">Hover
    over me</a>

Change Bootstrap tooltip color

40 Answers40

Benefits of this approach:

Create your original mixin:

Call your mixin (adjust class name and color)

Set your BS4 Tooltip in your layout (adjust direction)

Linked

Related