Changing Bootstrap tooltip styles using CSS

Question

I have Bootstrap 4.5.0 installed and running but am playing around with adjusting the styles of the tooltips. The following code.

At the top of the page I include the stylesheets:

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" href="https://getbootstrap.com/docs/4.5/assets/css/docs.min.css">

    <link href="mystylesheet.css" rel="stylesheet">

Then I have the tooltip markup in the page:

<span id="custom-tooltip" data-toggle="tooltip" data-placement="top" data-html="true" title="TTooltip tests">
    <svg ...></svg>
</span>

I have all the JS at the bottom to handle bootstrap and the tooltip:

    <!-- jQuery first, then Popper.js, then Bootstrap JS --><
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

    <!--Enable tooltips from Popper.js-->
    <script type="text/javascript">
        $(function ()
        {
            $('[data-toggle="tooltip"]').tooltip()
        });
    </script>

I have tried to add the following to mystylesheet.css but nothing happens:

span#custom-tooltip .tooltip
{
    background-color: green !important;
}

The change in background above is just an example. I want other CSS type changes besides just the color.

Answer 1

As stated in the docs,

The .tooltip element is generated outside the triggered element. Something like this:

<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip bs-tooltip-top" role="tooltip">
  <div class="arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

So, styling like this span#custom-tooltip .tooltip won't work. You have to do something like this instead:

.tooltip
{
    background-color: green !important;
}

But this will apply styles to all tooltips. If you just want specific styles for your element then do something like this:

$('#example').tooltip({
    html: true,
    title: 'xyz',
    template: `
        <div class="custom-tooltip tooltip">
            <div class="tooltip-inner"></div> /* leave it blank so the title will fill in dynamically here by bootstrapjs */
        </div>
    `
});

and then to style:

.custom-tooltip {
    /* your styles here */
}

Check here for more config options