160

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?

3

40 Answers 40

214

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>

17
  • 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, 2015 at 6:15
  • 1
    Gawd! My bad!!! Fixed. @codesnooker didn't see that you were mentioning the arrow!!! Really sorry!!! Mar 10, 2015 at 10:03
  • 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, 2016 at 19:18
  • 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 Dec 6, 2016 at 17:46
  • 1
    @Fred-ii- Aha... :D #Karma Dec 6, 2016 at 17:53
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/

7
  • The fiddle doesn't work and I don't see the caret changing with this code.
    – Don
    Nov 20, 2013 at 21:44
  • @Don The github refs to the css and js were no longer working; updated to use Bootstrap CDN (legacy). Nov 20, 2013 at 23:05
  • None of this worked for me, but Tuyen's solution does.
    – Tillito
    Feb 28, 2017 at 8:52
  • @technoTarek There is an issue with left, right and top placements. check the edited jsFiddle
    – Anurag
    Mar 9, 2017 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: jsfiddle.net/technotarek/nhvvqz4v Mar 10, 2017 at 12:40
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>

5
  • 1
    The only solution that worked for me on all placements of the tooltip :). Thanks!
    – Anurag
    Mar 9, 2017 at 21:00
  • Should have been the accepted answer. It would help the reader if you could add a jsFiddle.
    – Anurag
    Mar 10, 2017 at 7: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, 2020 at 2:22
  • 3
    It works thanks. But arrow is still black, can not change it.
    – matasoy
    Feb 6, 2021 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 8, 2022 at 10:40
37

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>

1
  • The demo runs fine, but in .tooltip-inner you have set background-color the same as color.
    – iteam
    Dec 10, 2020 at 11:47
13

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

For the arrow color, you can use this:

.tooltip .tooltip-arrow {border-top: 5px solid red !important;}
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.

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

This worked for me .

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

.tooltip .tooltip-inner {
    background-color: #008ec3;
}
3
  • 1
    None of other solutions worked for me. But, your solution worked for me. Thanks! :)))
    – Lim
    Dec 11, 2019 at 5:59
  • Thanks. Works for me with Bootstrap 5 apart from the arrow color. Any idea for this one?
    – morja
    Sep 18, 2022 at 9: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, 2023 at 8:41
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');
});
1
  • But the arrow property not affected, how to change the arrow color?
    – Ali
    Oct 13, 2021 at 14:27
6

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 */
}
1
  • Works for Bootstrap 5, thanks!
    – Niksr
    Jan 24, 2022 at 9:12
6

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

0
4

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

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

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>

1
  • 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. Jan 23, 2020 at 12:22
3

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

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;
}
1
  • you will only need the .bs-tooltip-bottom .tooltip-arrow::XXXX that corresponds to the tooltip you are using.
    – Mbotet
    Jan 17, 2023 at 12:03
2

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

2

You can use this way:

And in the CSS:

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

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 ?!?

0
2

Bootstrap 3 + SASS for bottom tooltip :

.red-tooltip {
    & + .tooltip.bottom {
          .tooltip-inner{background-color:$red;}
          .tooltip-arrow {border-bottom-color: $red;}
    }
}
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;
}
2

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>

2

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)

2

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

This works for me in Bootstrap 5:

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

$(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.

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;
}
2
  • bootstrap 4 working please check the placement of CSS.
    – Manish
    Apr 25, 2018 at 8:07
  • explain your answer little bit. it could help to others
    – coder
    Apr 25, 2018 at 8:27
1

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/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>

0
0

The only way working for me:

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.