Style ngBootstrap tooltip

Question

J'ai une simple info-bulle ngBootstrap dans un 4 composant angulaire que j'essaie de styler. Selon d'autres questions SO cela devrait fonctionner:

.tooltip-inner { 
    background-color: #00acd6 !important; 
    /*!important is not necessary if you place custom.css at the end of your css calls. For the purpose of this demo, it seems to be required in SO snippet*/ 
    color: #fff; 
} 

mais il n'a aucun effet. J'ai confirmé que l'info-bulle interne est utilisée à l'intérieur de l'info-bulle mais qu'elle n'est pas appliquée.

Answer 1

This Plunker montre comment vous pouvez styliser les info-bulles ng-bootstrap. La clé est d'utiliser /deep/ ou ::ng-deep ** pour forcer le style dans le composant enfant:

::ng-deep .tooltip-inner { 
    background-color: #00acd6; 
    color: #fff; 
} 

Par défaut, angulaire utilise émulé view encapsulation ce qui signifie que les styles ne se propagent d'un parent à un composant enfant à moins que vous leur dites (par exemple en utilisant ::ng-deep).

** /deep/ était deprecated in Angular 4.3.0 et ::ng-deep est maintenant préféré, bien que selon le lien ce sera également dépréciée à l'avenir