Bootstrap 4 change tooltip color for a specific element

Question

I'm trying to change the tooltip background-color for the icons with the classes alert-danger to be red and alert-success to be green through these commands:

.alert-danger + .tooltip > .tooltip-inner {
    background-color: red !important;
}
.alert-success + .tooltip > .tooltip-inner {
    background-color: green;
}
.alert-danger + .tooltip > .tooltip.bs-tooltip-top .arrow::before{
    border-top-color: red;
}
.alert-success + .tooltip > .tooltip.bs-tooltip-top .arrow::before{
    border-top-color: green;
}

I've found this solution on this StackOverflow link.

The problem that I'm facing is that every time I hover my mouse over the icon, the Boostrap code creates a div element at the bottom of the body tag so that the code that I was loading does not work as expected.

How can I resolve this issue?

Edit

My HTML code is as follows:

<i class="far fa-check-circle alert-success" data-toggle="tooltip" data-original-title="Sim"></i>

Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a **Stack Snippet**. Although you have provided a link, if it was to become invalid, your question would be of no value to other future SO users with the same problem. See [**Something in my website OR off-site example doesn't work can I just paste a link**](http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it). — Paulie_D, Feb 10 '20 at 14:50
I added the html related to the problem in the question, I guess you can reproduce now the same issue. — Matheus Sant'ana, Feb 10 '20 at 14:53

score 1 · Accepted Answer · answered Feb 10 '20 at 16:56

In this case, you are using + selector, that will select the adjacent sibling. If you change it to ~ selector, it will select any next sibling, not only the next one (adjacent). Even so, it may not work for you. It depends on how your HTML code is structured and how complex it is.

It is recommended for you to check how CSS selectors work.

I think a better solution for you would to change the container of each tooltip. The default container is body, that's why it is being redenred there. Just add data-container attribute on each icon element:

<i
  class="far fa-check-circle alert-success"
  data-toggle="tooltip"
  data-original-title="Text"
  data-container=".alert-success">
</i>
<i
  class="far fa-check-circle alert-danger"
  data-toggle="tooltip"
  data-original-title="Text"
  data-container=".alert-danger">
</i>

Like this, the tooltips will be rendered inside each icon element instead of the body.

So, you just have do adjust the CSS according to your need.
Now it's easier to select the tooltip.

.danger-tooltip .tooltip .tooltip-inner {
    background-color: red;
}
.success-tooltip .tooltip .tooltip-inner {
    background-color: green;
}
.danger-tooltip .tooltip .arrow::before{
    border-top-color: red;
}
.success-tooltip .tooltip .arrow::before{
    border-top-color: green;
}

If you need more specificity, you can give a new class name for each icon element and use it as a container for the tooltip as well.

Great work, dude! It worked smoothly. Thanks for the detailed solution!!! — Matheus Sant'ana, Feb 10 '20 at 17:12

score 1 · Answer 2 · answered Feb 10 '20 at 17:22

If you want to achieve by css only then need to add this data-container=".alert-success" attribute so this method to tooltip div will append inside define .alert-success class section.
So I hope below snippet will help you lot.

$(function () {
  $('[data-toggle="tooltip"]').tooltip();
});

.alert-danger .tooltip > .tooltip-inner {
  background-color: red;
}
.alert-success .tooltip > .tooltip-inner {
  background-color: green;
}
.alert-danger > .tooltip.bs-tooltip-top .arrow::before{
  border-top-color: red;
}
.alert-success > .tooltip.bs-tooltip-top .arrow::before{
  border-top-color: green;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<div class="container my-5 text-center">
  <div class="row">
    <div class="col-sm-12">
      <i class="fa fa-times-circle alert-danger" data-container=".alert-danger" data-toggle="tooltip" title="Tooltip Danger"></i>
      <i class="fa fa-check-circle alert-success" data-container=".alert-success" data-toggle="tooltip" title="Tooltip Success"></i>
    </div>
  </div>
</div>

Bootstrap 4 change tooltip color for a specific element

2 Answers2