web-dev-qa-db-fra.com

Problème d’info-bulle, MatTooltip ne fonctionne pas dans Angular

J'essaie d'insérer une info-bulle de notification dans ma page de tableau de bord, mais l'info-bulle ne fonctionne pas. Je suis très nouveau chez Angular, donc toute piste à ce sujet sera très appréciée. 

module.ts

...__ importer {MatTooltipModule} à partir de '@ angular/material'; ..

@NgModule({
..
MatTooltipModule
..})

composant.html 

    <div class="notifications">
        <i class="fa fa-bell fa-2x" aria-hiden="true" matTooltip="Tooltip!"></i>
    </div>
angularangular-materialtooltip
5
Soumyadip Chakraborty

Pour utiliser l'info-bulle sur un matériau angulaire, il vous faut:

  1. Importez les BrowserAnimationsModule et MatTooltipModule:

app.module.ts

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

@NgModule({
  imports: [
    BrowserAnimationsModule,
    MatTooltipModule,
    // ...
  1. Ajouter une info-bulle à votre composant

test.component.html

<div matTooltip="Tooltip!">Hover me</div>
  1. P.S Si vous n’avez pas déjà installé et importé les HummerJs, vous devrez peut-être (Le matériel les utilise pour certaines animations et certains gestes tactiles):
    npm i -S hammerjs
    npm i -D @types/hammerjs

Et dans votre app.module.js import hammerjs:

import 'hammerjs';

Pour voir un exemple complet de travail, voir: https://stackblitz.com/angular/keqjqmxbrbg

Mettre à jour

J'ai trouvé une fuite de mémoire dans mon application, due à l'utilisation intensive de mat-tooltip (dans une boucle). Cette fuite de mémoire peut être corrigée en supprimant HummerJS.
Pour plus d’informations et d’autres solutions possibles (au lieu d’enlever HummerJS), voir: https://github.com/angular/material2/issues/4499

12
Gil Epshtain

J'avais un problème similaire. Il a été corrigé lorsque j'ai ajouté le thème CSS du matériau.

Vérifiez la console pour voir si elle contient un avertissement. Essayez d’ajouter le thème CSS au fichier parent.

3
Caleb Grams

Le problème est dans la déclaration d'importation Voici la bonne façon,

importer {MatTooltipModule} de '@ angular/material/tooltip';

0
Sam David