Hey there, I'm currently working on an Angular Material tooltip implementation. When I hover over my span element, the tooltip appears. Now, I'm wondering how I can dynamically change the background color of the tooltip based on certain conditions (for example, displaying red for errors and green for success).
Here is the component code:
import {
Component,
Input,
HostBinding,
OnInit,
ViewEncapsulation,
ElementRef,
AfterViewInit
} from '@angular/core';
@Component({
selector: 'dbs-tooltip',
templateUrl: './tooltip.component.html',
styleUrls: ['./tooltip.component.scss'],
})
export class TooltipComponent implements AfterViewInit{
@Input() content: any;
@Input() position: any;
@Input() type: string;
constructor(private elRef:ElementRef) {}
ngAfterViewInit() {
this.elRef.nativeElement.querySelector('.mat-tooltip');
}
getToolTipClass() {
if (this.type === 'error') {
return 'error-class';
} else if (this.type === 'success') {
return 'success-class';
}
}
}
This is the HTML code:
<span mdTooltip={{content}} mdTooltipPosition={{position}}>
<ng-content></ng-content>
</span>
And here are the CSS styles:
// md-tooltip-component {
// div {
// background: red;
// }
// }
.success-class {
md-tooltip-component {
div {
background: green;
}
}
}
Do you have any ideas or suggestions? Thank you in advance for your assistance.