Angular CDK: Cuando el tooltip nativo se queda corto (Nivel Básico)

ng new nombre-del-proyecto

ng add @angular/material

app.component.html

<mat-chip-list class="chip-list">
  <mat-chip color="primary" selected>
    Tooltip con template
  </mat-chip>
  <mat-chip color="accent" selected>
    Tooltip con componente
  </mat-chip>
</mat-chip-list>

<ng-template #tooltipTemplate>
  <div>
    <h3>Este contenido está siendo pasado desde un template</h3>
    <p>Lorem ipsum dolor sit amet</p>
    <p>consectetur adipiscing elit</p>
    <p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
  </div>
</ng-template>

app.component.scss

.chip-list {
  display: flex;
  flex-flow: row;
  place-content: center;
  padding-top: 16px;
}

ng g c components/tooltip

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { MatChipsModule } from '@angular/material/chips';
import { TooltipComponent } from './components/tooltip/tooltip.component';

@NgModule({
  declarations: [
    AppComponent,
    TooltipComponent
  ],
  imports: [
    BrowserModule,
    NoopAnimationsModule,
    MatChipsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

ng g d directives/custom-tooltip

custom-tooltip.directive.ts

@Directive({ selector: '[customTooltip]' })
export class CustomTooltipDirective {
  /** Contenido que se va a renderizar dentro del tooltip */
  @Input('customTooltip') tooltipContent: TemplateRef<any> | ComponentType<any>;

  /** Overlay que simula ser un tooltip */
  private _overlayRef: OverlayRef;
}

custom-tooltip.directive.ts

@Directive({ ... })
export class CustomTooltipDirective implements OnInit {
  ...
  constructor(
    private overlay: Overlay,
    private overlayPositionBuilder: OverlayPositionBuilder,
    private elementRef: ElementRef,
    private viewContainerRef: ViewContainerRef,
  ) { }

  ngOnInit(): void {
    // Si se recibe el contenido a mostrar
    if (this.tooltipContent) {
      // Se crea la configuración de posicionamiento para el tooltip
      const position = this.overlayPositionBuilder
      // Se enlaza la posición del overlay al elemento portador de la directiva
      .flexibleConnectedTo(this.elementRef)
      // Se declaran las posiciones preferidas que usará el overlay al mostrarse
      .withPositions([
        {
          originX: 'center',
          originY: 'bottom',
          overlayX: 'center',
          overlayY: 'top',
          offsetX: 0,
          offsetY: 8,
        },
        {
          originX: 'center',
          originY: 'top',
          overlayX: 'center',
          overlayY: 'bottom',
          offsetX: 0,
          offsetY: -8,
        }
      ]);

      // Se crea el overlay y se guarda su referencia
      this._overlayRef = this.overlay.create({
        // Configuración para la posición del overlay
        positionStrategy: position,
        // Comportamiento del overlay cuando se haga scroll y se esté mostrando
        scrollStrategy: this.overlay.scrollStrategies.close(),
        // Clase para darle estilo al overlay
        panelClass: 'custom-tooltip',
      });
    }
    // Se muestra un error si la directiva no recibe contenido para mostrar
    else {
      console.error('[ERROR] La directiva tiene que recibir el contenido a mostrar...');
    }
  }

}

styles.scss

html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

.custom-tooltip {
  background-color: #232F34;
  color: white;
  padding: 16px;
  border-radius: 8px;
}

custom-tooltip.directive.ts

@Directive({ ... })
export class CustomTooltipDirective implements OnInit {
  ...
  @HostListener('mouseenter')
  private _show(): void {
    // Si existe overlay se enlaza con el contenido
    if (this._overlayRef) {
      let containerPortal: TemplatePortal<any> | ComponentPortal<any>;

      // Creamos un TemplatePortal si lo que recibió la directiva era un Template
      if (this.tooltipContent instanceof TemplateRef) {
        containerPortal = new TemplatePortal(this.tooltipContent, this.viewContainerRef);
      }
      // En caso contrario creamos un ComponentPortal
      else {
        containerPortal = new ComponentPortal(this.tooltipContent, this.viewContainerRef);
      }

      // Enlazamos el portal con el overlay creado al iniciar la directiva
      this._overlayRef.attach(containerPortal);
    }
  }

  @HostListener('mouseout')
  private _hide(): void {
    // Si existe un overlay se desenlaza del contenido
    if (this._overlayRef) {
      this._overlayRef.detach();
    }
  }
}

tooltip.component.html

<div class="component">
  <div class="header">
    <!-- Descomentad la siguiente línea para usar la imágen de prueba -->
    <!-- <img class="user-icon"
      src="https://www.stickpng.com/assets/images/585e4beacb11b227491c3399.png"> -->
    <h2>Header del componente</h2>
  </div>
  <div class="body">
    <p class="center-text">Cuerpo del componente</p>
  </div>
  <mat-divider class="footer-divider"></mat-divider>
  <div class="footer">
    <small class="right-text">Footer del componente</small>
  </div>
</div>

tooltip.component.scss

.component {
  width: 400px;

  .header {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    place-content: center;
    column-gap: 16px;
    grid-auto-rows: 32px;
  }

  .body {
    margin: 16px;

    .center-text {
      margin: auto;
      text-align: center;
    }
  }

  .footer {
    .right-text {
      display: block;
      text-align: right;
    }
  }

  .user-icon {
    height: 30px;
    width: 30px;
  }

  .footer-divider {
    margin: 16px 0;
    background-color: white;
    box-sizing: border-box;
  }
}

app.component.html

<mat-chip-list class="chip-list">
  <mat-chip color="primary" selected [customTooltip]="tooltipTemplate">
    Tooltip con template
  </mat-chip>
  <mat-chip color="accent" selected [customTooltip]="tooltipComponent">
    Tooltip con componente
  </mat-chip>
</mat-chip-list>

<ng-template #tooltipTemplate>
  <div>
    <h3>Este contenido está siendo pasado desde un template</h3>
    <p>Lorem ipsum dolor sit amet</p>
    <p>consectetur adipiscing elit</p>
    <p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
  </div>
</ng-template>

app.component.ts

@Component({ ... })
export class AppComponent {
  tooltipComponent = TooltipComponent;
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MatDividerModule } from '@angular/material/divider';
import { AppComponent } from './app.component';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { MatChipsModule } from '@angular/material/chips';
import { TooltipComponent } from './components/tooltip/tooltip.component';
import { CustomTooltipDirective } from './directives/custom-tooltip.directive';
import { OverlayModule } from '@angular/cdk/overlay';

@NgModule({
  declarations: [
    AppComponent,
    TooltipComponent,
    CustomTooltipDirective
  ],
  imports: [
    BrowserModule,
    NoopAnimationsModule,
    MatChipsModule,
    OverlayModule,
    MatDividerModule,
  ],
  entryComponents: [TooltipComponent],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }