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

Question

I installed bootstrap v4 beta and with it popper.js library (tooltip.js). I am trying to use this tooltip feature. So I managed to create it, but I can’t change its appearance / style for me. I have looked through their documentation several times, but I cannot figure it out. (I just hate the so-called "documentation", which has no examples). So here is my html:

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

I activated it when switching data in js:

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

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

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

, , , ... :

... - ? .

Answer 1

. , tooltip-inner arrow:

Bootstrap 4.0.0

.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;
}

( #00cc00 - )

Answer 2

:

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