Estou tentando reformular / reformatar uma dica de ferramenta no Bootstrap 4, e a maneira original de fazer isso não parece mais funcionar. Atualmente estou fazendo isso:

.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 está funcionando bem, mas.tooltip.top .tooltip-arrow não é; fica preto. Estou assumindo.tooltip.top é a seta na parte superior de uma dica de ferramenta alinhada por baixo.

Qualquer ajuda seria muito apreciada