angulartooltipcss-animationsangular-material2

Removing animation from Angular Material Tooltip (Angular 4)


I am using Angular 4 and have implemented the Angular Material tooltip within my app as shown below (it all is working fine)

However once I hover over the tooltip #nav div the tooltip animates and I cannot see any property in the official docs to disable this - what is the best way to disable this animation just for this element

https://material.angular.io/components/tooltip/api

<div id="nav" matTooltip="Filter" 
     matTooltipShowDelay="1000" 
     matTooltipPosition="above">

Solution

  • For @angular/material 19.x:

    .mat-mdc-tooltip {
      animation: none !important;
    }