Stylisation d'une info-bulle (popper.js/bootstrap v4 beta)

Question

J'ai installé bootstrap v4 beta et avec lui la bibliothèque popper.js (tooltip.js). J'essaie d'utiliser sa fonction d'info-bulle. J'ai donc réussi à le faire apparaître mais je ne peux pas changer son apparence/style pour la vie de moi. J'ai regardé leur documentation plusieurs fois mais je n'arrive pas à comprendre. (Je déteste juste une soi-disant "documentation" qui n'a pas d'exemples). Voici donc mon html:

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

I activé sur-bascule de données dans js:

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

Je remarqué que lorsque l'info-bulle apparaît une nouvelle div est créé avec la classe « info-bulle .. . » donc je pensais que je pouvais cibler cette classe et le style dans mon SCSS, donc:

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

Non mes options de style, escomptés vient de tester pour voir fonctionner ... bien le résultat:Le même arrière-plan noir avec mon arrière-plan de test derrière moi ... quelqu'un peut-il m'aider à comprendre cela? Merci beaucoup.

Answer 1

La structure de l'info-bulle est described in the docs. Pour changer le style que vous devez remplacer tooltip-inner et arrow :

Mise à jour pour 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; 
} 

(où #00cc00 est la couleur désirée infobulle)

Answer 2

Pour moi, je devais faire cela à la place pour l'infobulle du bas:

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