Re-color Tooltip in Bootstrap 4

Question

I'm trying to re-skin/re-format a tooltip in Bootstrap 4, and the original way of doing it doesn't seem to work anymore. Currently I am doing this:

.tooltip-inner {
    background: #7abcff; 
    background: -webkit-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); 
    background:    -moz-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); 
    background:   linear-gradient(to bottom, #7abcff 0%,#60abf8 44%,#4096ee 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); 
    color: #fff;
    font-family: 'Roboto', Arial, sans-serif;
}
.tooltip.top .tooltip-arrow {
    border-top-color: #7abcff;
}

.tooltip-inner is working fine, but .tooltip.top .tooltip-arrow isn't; it stays black. I am assuming .tooltip.top is the arrow on top of a bottom aligned tooltip.

Any help would be greatly appreciated

Answer 1

I am using bootstrap 4.0.0-beta.2. and this code worked for me.

.tooltip.bs-tooltip-bottom .tooltip-inner {
 background:#444 !important;
 }

 .tooltip .arrow:before {
 border-bottom-color:#444 !important;
  border-top-color:#444 !important;
  }

Answer 2

Bootstrap 4 has different classes than 3, you need to use:

.tooltip.tooltip-top .tooltip-arrow,
.tooltip.bs-tether-element-attached-bottom .tooltip-arrow {
  border-top-color: #7abcff;
}

These selectors represent arrow of the top aligned tooltip.

Answer 3

Bootstrap 4.0.0 & Popper.js

This is the minimal code for left-sided green tooltip:

.tooltip .tooltip-inner {
  background-color: green;
}

.tooltip .arrow::before {
  border-left-color: green;
}

Just add it to your CSS.