Problema de información sobre herramientas, MatTooltip no funciona en Angular

Solución:

Para usar la información sobre herramientas de material angular, necesitará:

1. Importar el BrowserAnimationsModule y MatTooltipModule:

app.module.ts

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatTooltipModule } from '@angular/material/tooltip';

@NgModule({
  imports: [
    BrowserAnimationsModule,
    MatTooltipModule,
    // ...

2. Agregue información sobre herramientas a su componente

test.component.html

<div matTooltip="Tooltip!">Hover me</div>

3. PD Si aún no ha instalado e importado HammerJs, es posible que deba hacerlo (Material lo usa para algunas animaciones y gestos táctiles):
   npm i -S hammerjs
npm i -D @types/hammerjs

Y en tu app.module.js importa hammerjs:

import 'hammerjs'; 

Para ver un ejemplo de trabajo completo, consulte: https://stackblitz.com/angular/keqjqmxbrbg

Actualizar

Encontré una pérdida de memoria en mi aplicación, debido al uso extensivo de mat-tooltip (en un bucle). Esta pérdida de memoria se puede solucionar eliminando HammerJS.
Para obtener más información y otras posibles soluciones (en lugar de eliminar HammerJS), consulte: https://github.com/angular/material2/issues/4499

Tuve un problema similar. Se solucionó cuando agregué el CSS del tema Material.

Verifique la consola para ver si tiene una advertencia. Intente agregar el tema CSS al archivo principal.

Si ve un error que indica que no se encontró ningún tema para el material, agregue uno de los temas del material, como este, a la primera línea de su archivo CSS principal;

@import '@angular/material/prebuilt-themes/deeppurple-amber.css'; 

---

---

Utiliza Nuestro Buscador