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

Question

I have some problems in Bootstrap customizing the tooltips. I want to make the tooltips wider and let it have a custom background color as well as a text color.

I've tried a bunch of different methods, however it didn't work out how I wanted it to work. Does anyone have experience with tooltip customization inside Bootstrap4? I did already find some topics, but all of them were about Bootstrap 2 or 3.

I have designed a tooltip that I want in Photoshop, here is the image: How I want the tooltip . This is how it looks right now: How the tooltip is right now

This is the code that I used so far (I'm not posting the SCSS because all of it didn't work):

<h1 data-toggle="tooltip" title=" example">MENU LUX</h1>

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

Css:

.tooltip {
border-color: rgb(151, 151, 151);
background-color: rgb(151, 151, 151);
color: black;
}

Answer 1

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>