Change Bootstrap tooltip color

HtmlCssTwitter Bootstrap

Html Problem Overview

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?

Html Solutions

Solution 1 - Html

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>

Solution 2 - Html

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/

Solution 3 - Html

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>

Solution 4 - Html

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>

Solution 5 - Html

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

Solution 6 - Html

For the arrow color, you can use this:

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

Solution 7 - Html

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.

Solution 8 - Html

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

Solution 9 - Html

This worked for me .

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

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

Solution 10 - Html

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 */
}

Solution 11 - Html

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

Solution 12 - Html

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

Solution 13 - Html

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>

Solution 14 - Html

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

Solution 15 - Html

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>

Solution 16 - Html

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

Solution 17 - Html

You can use this way:

And in the CSS:

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

Solution 18 - Html

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

Solution 19 - Html

Bootstrap 3 + SASS for bottom tooltip :

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

Solution 20 - Html

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

Solution 21 - Html

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>

Solution 22 - Html

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)

Solution 23 - Html

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

Solution 24 - Html

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

Solution 25 - Html

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

Solution 26 - Html

The only way working for me:

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

Solution 27 - Html

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.

Solution 28 - Html

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>

> 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).

Solution 29 - Html

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

Solution 30 - Html

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.

Solution 31 - Html

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

Solution 32 - Html

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

Solution 33 - Html

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!

Solution 34 - Html

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

Solution 35 - Html

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

Solution 36 - Html

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>

Categories
Recommended Html Solutions
Recommended Css Solutions
Recommended Twitter Bootstrap Solutions

Previous Solution:

how to use ng-option to set default value of select element

Angularjs

Next Solution:

Limiting number of displayed results when using ngRepeat

JavascriptModel View-ControllerAngularjsScope

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionJohn SmithView Question on Stackoverflow
Solution 1 - HtmlPraveen Kumar PurushothamanView Answer on Stackoverflow
Solution 2 - HtmltechnoTarekView Answer on Stackoverflow
Solution 3 - HtmlTuyen CaoView Answer on Stackoverflow
Solution 4 - Html GOTOLRView Answer on Stackoverflow
Solution 5 - HtmlJuliorView Answer on Stackoverflow
Solution 6 - HtmlzvictorView Answer on Stackoverflow
Solution 7 - HtmlEric GrotkeView Answer on Stackoverflow
Solution 8 - HtmlDrealView Answer on Stackoverflow
Solution 9 - HtmlMadian MalfiView Answer on Stackoverflow
Solution 10 - HtmlSamuelView Answer on Stackoverflow
Solution 11 - HtmlAkther HussainView Answer on Stackoverflow
Solution 12 - HtmlPaulo Borralho MartinsView Answer on Stackoverflow
Solution 13 - HtmlOlegView Answer on Stackoverflow
Solution 14 - HtmlDavidView Answer on Stackoverflow
Solution 15 - HtmlKokomoView Answer on Stackoverflow
Solution 16 - HtmlShital ShahView Answer on Stackoverflow
Solution 17 - HtmlSandipView Answer on Stackoverflow
Solution 18 - HtmlC0ZENView Answer on Stackoverflow
Solution 19 - HtmlBertrandView Answer on Stackoverflow
Solution 20 - HtmlAmir IqbalView Answer on Stackoverflow
Solution 21 - HtmlNadavView Answer on Stackoverflow
Solution 22 - HtmlImreView Answer on Stackoverflow
Solution 23 - HtmlDragos NitescuView Answer on Stackoverflow
Solution 24 - HtmlManishView Answer on Stackoverflow
Solution 25 - HtmlShreamyView Answer on Stackoverflow
Solution 26 - HtmlVivienView Answer on Stackoverflow
Solution 27 - HtmlJhWebDevView Answer on Stackoverflow
Solution 28 - HtmlRamin BateniView Answer on Stackoverflow
Solution 29 - HtmlIndra SView Answer on Stackoverflow
Solution 30 - HtmldeusozView Answer on Stackoverflow
Solution 31 - HtmlSergey NudnovView Answer on Stackoverflow
Solution 32 - HtmlSalvoView Answer on Stackoverflow
Solution 33 - HtmlklewisView Answer on Stackoverflow
Solution 34 - HtmlAlaa KrunbView Answer on Stackoverflow
Solution 35 - HtmlIvana BakijaView Answer on Stackoverflow
Solution 36 - HtmlMonisha NarayanView Answer on Stackoverflow