Change Bootstrap Tooltip Color

Change Bootstrap tooltip color

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>

Changing color of Bootstrap tooltip

The problem is in your + selector -- remember, that's the adjacent sibling combinator, meaning that the target needs to come immediately after the element you're referencing. This is not the case with the Bootstrap tooltip; it gets injected at the bottom of the DOM.

It is still a sibling in this particular example, so you can target it with the general sibling combinator (~), simply replacing your + with ~ (tilde):

$(document).ready(function() {  $('[data-toggle="tooltip"]').tooltip()});
.tooltip-primary~.tooltip>.tooltip-inner {  background-color: blue;}
.tooltip-primary~.tooltip>.tooltip-arrow {  border-bottom-color: blue;}
<script src="https://code.jquery.com/jquery-3.2.1.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><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

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

How can I change a Bootstrap 5 tooltip color based on button style?

You can make it dynamic using dataset.

In javascript you just need to add hover on button and in handler add dynamic color based on the dataset value.

    $("button").hover(function () {
        $(".tooltip-inner").css({ "background-color": "var(--bs-" + $(this).data("color") + ")" });
        $(".tooltip-arrow").css({ "background-color": "var(--bs-" + $(this).data("color") + ")" });
    });

See the Snippet below:

(function (window, document, $, undefined) {
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });

    $("button").hover(function () {
        $(".tooltip-inner").css({ "background-color": "var(--bs-" + $(this).data("color") + ")" });
    });
})(window, document, jQuery);
<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <!-- Bootstrap CSS -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />

        <title>Bootstrap</title>
    </head>
    <body>
        <div class="container mt-5">
<button type="button" class="btn btn-lg btn-primary" data-bs-toggle="tooltip" data-color="primary" data-bs-placement="top" title="Primary">Primary</button>
<button type="button" class="btn btn-lg btn-secondary" data-bs-toggle="tooltip" data-placement="top" title="Secondary" data-color="secondary">Secondary</button>
<button type="button" class="btn btn-lg btn-success" data-bs-toggle="tooltip" data-placement="top" title="Success" data-color="success">Success</button>
<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="tooltip" data-bs-placement="top" title="Danger" data-color="danger">Danger</button>
<button type="button" class="btn btn-lg btn-warning" data-bs-toggle="tooltip" data-bs-placement="top" title="Warning" data-color="warning">Warning</button>
<button type="button" class="btn btn-lg btn-info" data-bs-toggle="tooltip" data-bs-placement="top" title="Info" data-color="info">Info</button>

        </div>
        
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    </body>
</html>

Correct way to customize a Bootstrap 4 tooltip width, color & arrow?

The issue with your CSS is that it's not specific enough to override the default styling.

To do this you can use a selector of a higher specificity than the default Bootstrap styling; note the addition of body to the selectors below.

$(function() {  $('[data-toggle="tooltip"]').tooltip();});
body .tooltip-inner {  background: rgb(151, 151, 151);  color: black;}body .tooltip .arrow::before {  border-bottom-color: rgb(151, 151, 151);}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm" crossorigin="anonymous"></script><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"><div id="container">  <h1 data-toggle="tooltip" title="example">MENU LUX</h1></div>

Re-color Tooltip in Bootstrap 4

As of Bootstrap 4.0

CSS for tooltip recoloring is handled by the .tooltip-inner class as you noticed:

.tooltip-inner {
    max-width: 200px;
    padding: 3px 8px;
    color: #fff;
    text-align: center;
    background-color: #000;
    border-radius: .25rem;
}

Css for top arrow:

.tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before, .tooltip.bs-tooltip-top .arrow::before {
    margin-left: -3px;
    content: "";
    border-width: 5px 5px 0;
    border-top-color: #000;
}

Css for right arrow:

.tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before, .tooltip.bs-tooltip-right .arrow::before {
    margin-top: -3px;
    content: "";
    border-width: 5px 5px 5px 0;
    border-right-color: #000;
}

Css for bottom arrow:

.tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .tooltip.bs-tooltip-bottom .arrow::before {
    margin-left: -3px;
    content: "";
    border-width: 0 5px 5px;
    border-bottom-color: #000;
}

Css for left arrow:

.tooltip.bs-tooltip-auto[x-placement^=left] .arrow::before, .tooltip.bs-tooltip-left .arrow::before {
    right: 0;
    margin-top: -3px;
    content: "";
    border-width: 5px 0 5px 5px;
    border-left-color: #000;
}

Bootstrap 4 change tooltip color for a specific element

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.

Change tooltip background color with new class

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>

Bootstrap 4 change tooltip arrow color

The selector you are looking for is .tooltip.bs-tether-element-attached-left .tooltip-inner::before:

.tooltip.bs-tether-element-attached-left .tooltip-inner::before {
    border-right-color: red;
}

If you want every tooltip arrow red - jsfiddle:

.tooltip.bs-tether-element-attached-bottom .tooltip-inner::before {
    border-top-color: red;
}

.tooltip.bs-tether-element-attached-top .tooltip-inner::before {
    border-bottom-color: red;
}

.tooltip.bs-tether-element-attached-left .tooltip-inner::before {
    border-right-color: red;
}

.tooltip.bs-tether-element-attached-right .tooltip-inner::before {
    border-left-color: red;
}

Related Topics

Target="_Blank" Vs. Target="_New"

How to Submit Form on Change of Dropdown List

Custom HTML Tag Attributes Are Not Rendered by Jsf

How to Wrap Text in a Pre Tag

Css Two Divs Next to Each Other

Input Type="Submit" VS Button Tag Are They Interchangeable

Changing Image on Hover With Css/Html

Styling Text Input Caret

Why Does the Outer ≪Div≫ Here Not Completely Surround the Inner ≪Div≫

How to Create a Checkbox With a Clickable Label

Implement an Input With a Mask

Html/Css: Making Two Floating Divs the Same Height

How to Expand Floated Child Div'S Height to Parent'S Height

Style Input Type File

How to Get HTML 5 Input Type="Date" Working in Firefox And/Or Ie 10

How to Fallback to Local Stylesheet (Not Script) If Cdn Fails

Css Overflow:Hidden With Floats

Removing Whitespace Between HTML Elements When Using Line Breaks


Leave a reply



Submit