I'm trying to apply styles to the ngbTooltip component in my Angular 2 app. I apply the directive as:
<div [ngbTooltip]="tooltipText">
Element text
</div>
But since Angular 2 applies style scoping, I can't directly style the .tooltip
class in my component's template.
How can I give the tooltips for this specific component a custom styling?
EDIT:
I have a scss stylesheet that's attached to my component. My styles (simplified) are:
.license-circle {
width: 10px;
... other styles
}
/deep/ .tooltip {
&.in {
opacity: 1;
}
}
But then my rendered styles look like:
<style>
.license-circle[_ngcontent-uvi-11] {
width: 10px; }
.tooltip.in {
opacity: 1; }
</style>
Which makes me believe the tooltip styles are being un-encapsulated (instead of just piercing this component's children.
Note: I tried :host >>> .tooltip
and it didn't work, so I ended up using /deep/
.
Thanks!
ng-bootstrap is a set of components and directives that wrap the latest version of Bootstrap ( v4. 0.0 alpha 6 at the time of this writing). This makes it easy to use Bootstrap in your Angular apps.
Yes, you can use parts of Angular Material and Bootstrap together in the same web or mobile project. Developers need to be careful not to use the same components, which can clash.
No, adding bootstrap. js or bootstrap. min. js is not necessary.
For angular version 8.3, ::ng-deep is recommended
::host .license-circle {
width: 10px;
... other styles
}
:host ::ng-deep .tooltip {
&.in {
opacity: 1;
}
}
One thing that we need to remember is that ::ng-deep, /deep/ & >>> have been deprecated in angular 9. So, finding some other long term solution would be a good thing to do at this point. Check out the docs for more.
As mentioned in the comment, the selectors should start with :host
:host .license-circle {
width: 10px;
... other styles
}
:host /deep/ .tooltip {
&.in {
opacity: 1;
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With