Tooltip Fix

 avatar
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