Change Bootstrap tooltip color

135

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?

This question is tagged with html css twitter-bootstrap

~ Asked on 2013-07-14 18:39:41

The Best Answer is


188

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:

_x000D_
_x000D_
$(function() {_x000D_
  $('[data-toggle="tooltip"]').tooltip()_x000D_
})
_x000D_
.tooltip-main {_x000D_
  width: 15px;_x000D_
  height: 15px;_x000D_
  border-radius: 50%;_x000D_
  font-weight: 700;_x000D_
  background: #f3f3f3;_x000D_
  border: 1px solid #737373;_x000D_
  color: #737373;_x000D_
  margin: 4px 121px 0 5px;_x000D_
  float: right;_x000D_
  text-align: left !important;_x000D_
}_x000D_
_x000D_
.tooltip-qm {_x000D_
  float: left;_x000D_
  margin: -2px 0px 3px 4px;_x000D_
  font-size: 12px;_x000D_
}_x000D_
_x000D_
.tooltip-inner {_x000D_
  max-width: 236px !important;_x000D_
  height: 76px;_x000D_
  font-size: 12px;_x000D_
  padding: 10px 15px 10px 20px;_x000D_
  background: #FFFFFF;_x000D_
  color: rgb(0, 0, 0, .7);_x000D_
  border: 1px solid #737373;_x000D_
  text-align: left;_x000D_
}_x000D_
_x000D_
.tooltip.show {_x000D_
  opacity: 1;_x000D_
}_x000D_
_x000D_
.bs-tooltip-auto[x-placement^=bottom] .arrow::before,_x000D_
.bs-tooltip-bottom .arrow::before {_x000D_
  border-bottom-color: #f00;_x000D_
  /* Red */_x000D_
}
_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>_x000D_
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />_x000D_
<div class="tooltip-main" data-toggle="tooltip" data-placement="top" data-original-title="Hello world"><span class="tooltip-qm">?</span></div>_x000D_
<style>_x000D_
  .bs-tooltip-auto[x-placement^=bottom] .arrow::before,_x000D_
  .bs-tooltip-bottom .arrow::before {_x000D_
    border-bottom-color: #f00;_x000D_
    /* Red */_x000D_
  }_x000D_
</style>
_x000D_
_x000D_
_x000D_

~ Answered on 2013-07-14 18:43:38


112

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/

~ Answered on 2013-07-14 21:39:33


Most Viewed Questions: