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

As of Bootstrap 4.0

CSS for tooltip recoloring is handled by the .tooltip-inner class as you noticed:

.tooltip-inner {     max-width: 200px;     padding: 3px 8px;     color: #fff;     text-align: center;     background-color: #000;     border-radius: .25rem; } 

Css for top arrow:

.tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before, .tooltip.bs-tooltip-top .arrow::before {     margin-left: -3px;     content: "";     border-width: 5px 5px 0;     border-top-color: #000; } 

Css for right arrow:

.tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before, .tooltip.bs-tooltip-right .arrow::before {     margin-top: -3px;     content: "";     border-width: 5px 5px 5px 0;     border-right-color: #000; } 

Css for bottom arrow:

.tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .tooltip.bs-tooltip-bottom .arrow::before {     margin-left: -3px;     content: "";     border-width: 0 5px 5px;     border-bottom-color: #000; } 

Css for left arrow:

.tooltip.bs-tooltip-auto[x-placement^=left] .arrow::before, .tooltip.bs-tooltip-left .arrow::before {     right: 0;     margin-top: -3px;     content: "";     border-width: 5px 0 5px 5px;     border-left-color: #000; }