Tooltip Fix
carlosuscamayta
javascript
12 days ago
2.3 kB
2
Indexable
Never
cambio en el html <i #tooltipIcon class="bi bi-info-circle-fill" role="button" data-bs-toggle="tooltip" data-bs-placement="top"></i> reemplaza el typescript: import { CommonModule } from '@angular/common'; import { AfterViewInit, Component, Input, TemplateRef, ViewChild, ElementRef } from '@angular/core'; import * as bootstrap from 'bootstrap'; @Component({ selector: 'app-widget-container', templateUrl: './widget-container.component.html', styleUrls: ['./widget-container.component.css'], imports: [CommonModule], standalone: true }) export class WidgetContainerComponent implements AfterViewInit { @Input() title: string = ''; @Input() cardClass: string = ''; @Input() type: string = ''; @ViewChild('tieredTooltip', { static: true }) tieredTooltip!: TemplateRef<any>; @ViewChild('touTooltip', { static: true }) touTooltip!: TemplateRef<any>; @ViewChild('uloTooltip', { static: true }) uloTooltip!: TemplateRef<any>; @ViewChild('tooltipIcon', { static: true }) tooltipIcon!: ElementRef; public selectedTooltip!: TemplateRef<any>; private tooltipInstance: any; ngAfterViewInit() { this.updateTooltip(); this.tooltipInstance = new bootstrap.Tooltip(this.tooltipIcon.nativeElement, { title: this.renderTemplate(this.selectedTooltip), html: true }); } updateTooltip() { switch (this.type) { case 'tiered': this.selectedTooltip = this.tieredTooltip; break; case 'tou': this.selectedTooltip = this.touTooltip; break; case 'ulo': this.selectedTooltip = this.uloTooltip; break; default: this.selectedTooltip = this.tieredTooltip; } if (this.tooltipInstance) { this.tooltipInstance.setContent({ '.tooltip-inner': this.renderTemplate(this.selectedTooltip) }); } } renderTemplate(template: TemplateRef<any>): string { const viewContainerRef = template.createEmbeddedView(null).rootNodes; let htmlContent = ''; viewContainerRef.forEach(node => { if (node.nodeType === Node.ELEMENT_NODE) { htmlContent += node.outerHTML; } else if (node.nodeType === Node.TEXT_NODE) { htmlContent += node.textContent; } }); return htmlContent; } }
Leave a Comment