Change tooltip color

Question

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

How should I do it?

Answer 1

You can use this method:

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

And in CSS:

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

jsFiddle

---

Moeen MH : With the latest bootstrap version, you may need to do this to get rid of the 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: rgb(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> 

Answer 2

Bootstrap 2

If you want to change the cursor / arrow, 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 must be specific to send a tooltip in Bootstrap 3. For example:

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

jsFiddle for all the hints using Bootstrap 3: http://jsfiddle.net/technotarek/L2rLE/

Answer 3

The only way to work for me is:

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

Answer 4

For arrow color you can use this:

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

Answer 5

Here is the 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; } 

Answer 6

For bootstrap4, I used the code:

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

Answer 7

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

Answer 8

It is important to note that starting with Bootstrap 4 you can customize these styles directly in the Bootstrap Sass variable file, so in _variables.scss you have the following 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/

It is best to work in Sass and compile how you use the Grunt or Gulp build tools.

Answer 9

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

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

Answer 10

They have already answered this correctly, but I think that I should also express my opinion. Like cozen, this is a border, and for it to work you must specify classes to format it the same way bootstrap points out. So you can do it

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

or you can do the following just for the tooltip arrow, but you have to add a value! it is important that it overwrite boot css

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

Answer 11

You can use the quick approach mentioned in other answers if you just want to change the color. However, if you use Bootstrap, you must use themes so that the appearance is consistent. Unfortunately, there is no built-in theme support for Bootstrap, so I wrote a small piece of CSS that does this. Basically you get the classes tooltip-info , tooltip-warning , etc., which you can add to the element to apply the theme.

You can find this code along with the violin, examples, and explanations in this answer: https://stackoverflow.com/a/316829/

Answer 12

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

 .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 color (for example, in a script with .class + .tooltip ...), it does not work (bootstrap 3).
If anyone knows how to handle this?!?

Answer 13

Bootstrap 3 + SASS for the bottom hint:

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

Answer 14

For the arrow, first confirm which direction you are using. For example, I use the left direction, then it should be

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

Answer 15

Unreadable answers work fine in the case of container: 'body' , and the following solution:

 // 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 initialize your tooltip as usual by passing your own CSS class using the 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> 

Answer 16

It seems to have changed in Bootstrap 4

If you want to change the color at the bottom containing the tooltip in red, just add this to your CSS:

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

Answer 17

It worked for me.

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

Answer 18

Bootstrap 4

When using BootStrap 4, a tooltip is added to the bottom of the body tag. If your tooltip is a child of another tag, there is no way to target the tooltip with css. The only way I found this to work is to use the insert.bs.tooltip event and add the class to the inner div and arrow. Then you can select a 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> = "sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin = "anonymous"> </ <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> 

Answer 19

You can use this method:

And in CSS:

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

Answer 20

It will change the color of the tooltip in bootstrap4, you can use the bottom, left, right to add CSS for the corresponding instead of the 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; } 

Answer 21

The only way to work for me is:

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

Answer 22

 $(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 it out, maybe it can help you. You can have some tips.

Answer 23

We use bootstrap 3.0 on our website, but none of the above steps worked in updating the tooltip style. But I found a solution using jQueryUI style 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 add this answer if someone else is in a similar situation, like me.

Answer 24

This simple method works for me when I want to change the background color of 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 the js code includes .data('tooltip') does not work for you, please comment on its line and uncomment the js code include .data('bs-tooltip') .

Note B:

If your boottrap tooltip function adds a tooltip to the end of the body (not immediately after the element) , my solution works well but some of the other answers on these pages did not work like @Praveen Kumar and @technoTarek in this scenario.

Note C:

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

Answer 25

If you want to use jQuery , you can try the following:

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

Answer 26

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

This is how I changed the color and the thickened arrow below. For each pixel added to the border width, I had to subtract the pixel from the "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 will have to adapt to other positions, i.e. for .tooltip.bs-tether-element-attach-left you will adjust border-right and move if you increase the width of the border, subtracting pixels from "left", etc.

Answer 27

Oleg replies that https://stackoverflow.com/a/2326165/ is the best of them. This allows you to apply tooltip styles to dynamically created elements. However, it does not 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

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

Answer 28

for Bootstrap 4 version via CSS:

if you want to change the background color of the balloon :

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

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

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

Hope to help you

Answer 29

In your BS4 project, if you can compile the SASS code, you can use the mixin to control the color scheme of prompts in any direction.

Advantages of this approach:

• You do not need to add additional javaScript / jQuery for something that includes styling.
• You use SASS for dynamic branding management.
• You can easily control which hints have which color and direction (s).

Here is one of many ways you can implement this:

Create your original mixin:

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

• Create a list and circle 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 (set class name and color)

• In your main .scss file, name your mixin like this:

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

Set the BS4 tooltip in your layout (adjust the direction)

• Finally, add a BS4 tooltip to your layout and give it your own class for flexibility. This BS4 resource talks about using the template as an option. We will use this to add our own class.

• The following example adds a tooltip to the information icon:

    <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 setting, you can customize the class name, color, and tooltip direction without touching the original mixin . How cool is that :)

Hope this helps!