Change tooltip background color with new class

in the package.json it says that i am using the following version of Bootstrap:

{
  "_from": "bootstrap@^4.5.0",
  "_id": "bootstrap@4.6.0",
...
}

I want on some pages to change the background color of the tooltip, by adding new class.

Here is the HTML code:

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

without having the class=”red-tooltip” i managed to change the background color with following CSS code:

.tooltip.show {
  opacity: 1;
}

.tooltip-inner {
  background-color: #ff0000;
  box-shadow: 0px 0px 4px black;
  opacity: 1 !important;
}

.tooltip.bs-tooltip-right .arrow:before {
  border-right-color: #ff0000 !important;
}

.tooltip.bs-tooltip-left .arrow:before {
 border-left-color: #ff0000 !important;
}

.tooltip.bs-tooltip-bottom .arrow:before {
 border-bottom-color: #ff0000 !important;
}

.tooltip.bs-tooltip-top .arrow:before {
 border-top-color: #ff0000 !important;
}

by adding “.red-tooltip” in front of all these lines it doesn’t work. Can you please help me to achieve this?

Answer

Bootstrap generates a new html element as “tooltip” and attach it to the document body, independient to the related a tag. You can see the generated html in https://getbootstrap.com/docs/4.0/components/tooltips/#markup.

Because of this, updating the class in the related a tag has no effect on the html generated by the tooltip. But you can apply different styles in several ways:

  1. Modify the CSS of the “tooltip”. Redefining classes as .tooltip-inner you can overwrite the base style (as in your code).

  2. Adding a class to the body of the desired pages, like red-tooltip and personalize the “toooltip” like this:

.red-tooltip .tooltip-inner {
  background: red;
}

  1. My favourite is redefining the “tooltip” html template in javascript. This allows different styled tooltips in the same page.

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})
$(function () {
  $('[data-toggle="tooltip-red"]').tooltip({
    template: '<div class="tooltip tooltip-red" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'
    
  })
})
.tooltip-red .tooltip-inner {
  background: red;
}

.tooltip-red .bs-tooltip-top .arrow::before, 
.tooltip-red .bs-tooltip-auto[x-placement^="top"] .arrow::before {
  border-top-color: red;
}
.tooltip-red .bs-tooltip-right .arrow::before, 
.tooltip-red .bs-tooltip-auto[x-placement^="right"] .arrow::before {
  border-right-color: red;
}
.tooltip-red .bs-tooltip-bottom .arrow::before, 
.tooltip-red .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
  border-bottom-color: red;
}

.tooltip-red .bs-tooltip-left .arrow::before, 
.tooltip-red .bs-tooltip-auto[x-placement^="left"] .arrow::before {
  border-left-color: red;
}
<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://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></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>


<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me (Normal)</a>

<br>
<br>

<a href="#" data-toggle="tooltip-red" title="Some tooltip text!">Hover over me (Red)</a>