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

Solution 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)

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