Styling a tooltip (popper.js / bootstrap v4 beta)

Question

I've installed bootstrap v4 beta and with it the popper.js (tooltip.js) library. I'm trying to use it's tooltip function. So I managed to make it appear but I can't change it's appearance/style for the life of me. I've looked over their documentation several times but I can't figure it out. (I just hate a so called "documentation" that doesn't have examples). So here is my html:

<span data-toggle="tooltip" data-placement="right" title="Tooltip on right">Simple Task Management</span>

I activated it on data-toggle in js:

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

I noticed that when the tooltip appears a new div is created with the class "tooltip ..." so I thought I could target that class and style it in my scss, so:

.tooltip {
    background-color: #DB2828;
    color: $green;  
}

Not my intended styling options, just tested to see it work...well the result:

The same black background with my test background behind it...can someone help me figure this out? Many thanks.

Answer 1

The structure of the tooltip is described in the docs. To change the style you need to override tooltip-inner and arrow:

Update for Bootstrap 4.0.0

Demo

.tooltip-inner {
    background-color: #00cc00;
}
.tooltip.bs-tooltip-right .arrow:before {
    border-right-color: #00cc00 !important;
}
.tooltip.bs-tooltip-left .arrow:before {
    border-left-color: #00cc00 !important;
}
.tooltip.bs-tooltip-bottom .arrow:before {
    border-bottom-color: #00cc00 !important;
}
.tooltip.bs-tooltip-top .arrow:before {
    border-top-color: #00cc00 !important;
}

(where #00cc00 is the desired tooltip color)

Answer 2

For me I had to do this instead for the bottom tooltip :

.tooltip-inner {
  background-color: $darkGrayClr;
}
.tooltip.bs-tooltip-bottom .arrow:before {
  border-bottom-color: $darkGrayClr;
}