Changing color of Bootstrap tooltip

I took this code from another post, however it won't work for me. The tooltip (including arrow) should be blue, but they are staying black.

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

Solution

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>

However, note that if your anchor is not at root level (which is highly likely), then you will not be able to use CSS to target the tooltip, as there is no notion of a parent selector in CSS.