Bootstrap tooltip arrow border and background color

Question

How do I change the background color and border color of the tooltip arrow? I'm using Bootstrap 4.

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

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

Codeply: https://www.codeply.com/go/DXTLRSDHcc

The difference between that post and this post is to identify how to change the border and background color of the arrow itself and not the toop tip. all of the answers shows that you put a border-top-color to achieve different color for the arrow. but I want to achieve different border color + background color of the arrow itself

Answer 1

Add another pseudo element that will cover the first one and you translate it slightly to create the needed visual

 $(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: 2px solid red; text-align: left; } .tooltip.show { opacity: 1; } .bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before { border-bottom-color: #f00!important; /* Red */ } .bs-tooltip-bottom .arrow::after { content: ""; position: absolute; bottom: 0; border-width: 0 .4rem .4rem; transform: translateY(3px); border-color: transparent; border-style: solid; border-bottom-color: #000; } 

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

Answer 2

I was able to get it to work doing something similar to what Temani Afif suggested. However we ended up changing over to using popovers instead so we could apply a popover-box-shadow . Bootstrap popovers are just like tooltips except they come with a border so none of that fussing with the overlapping arrows was necessary. Plus when using scss you can do the vast majority of styling just by modifying the variables.scss file.

In order to change the background color of the popover see this answer: Change bootstrap popover background color