Change Bootstrap tooltip color

by

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>

More Related Contents:

  1. Vertically center element on HTML page with some content on top (Bootstrap)
  2. Bootstrap 4 Carousel “Half of previous”
  3. Importing CSS and Bootsrap in HTML code
  4. Bootstrap column on mobile positions
  5. How to vertically center a container in Bootstrap?
  6. `col-xs-*` not working in Bootstrap 4
  7. Twitter Bootstrap 3 Sticky Footer
  8. Extend bootstrap row outside the container
  9. Bootstrap – align button to the bottom of card
  10. Bootstrap: add margin/padding space between columns
  11. How to remove focus around buttons on click
  12. How to vertically center a Bootstrap carousel-caption?
  13. Exclude menu item from the collapse of bootstrap 3 navbar
  14. Bootstrap 4 – Responsive cards in card-columns
  15. How to center content in a Bootstrap column?
  16. Inline Form nested within Horizontal Form in Bootstrap 3
  17. Same height column bootstrap 3 row responsive
  18. Why does `transform` break `position: fixed`?
  19. Change Bootstrap input focus blue glow
  20. Maintain image aspect ratio in carousel
  21. Bootstrap 3 grid, does it *really* matter how many columns are in a row?
  22. Fixed footer in Bootstrap
  23. How to implement a Navbar Dropdown Hover in Bootstrap v4?
  24. How can I make Bootstrap 4 columns all the same height? [duplicate]
  25. Changing image src depending on screen size
  26. Make Bootstrap’s Carousel both center AND responsive?
  27. Why is my .sticky-top class not working in Bootstrap 4?
  28. bootstrap 4: center inline form inside a jumbotron
  29. Sticky footer with flexbox
  30. How to make Bootstrap cards the same height in card-columns?

Leave a Comment