I am trying to insert a notifications tooltip in my dashboard page, but the tooltip is not working. I am very new to Angular, so any leads regarding this will be highly appreciated.
module.ts
..
import {MatTooltipModule} from '@angular/material';
..
@NgModule({
..
MatTooltipModule
..})
component.html
<div class="notifications">
<i class="fa fa-bell fa-2x" aria-hiden="true" matTooltip="Tooltip!"></i>
</div>
To use Angular-Material Tooltip you will need:
BrowserAnimationsModule and MatTooltipModule:app.module.ts
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatTooltipModule } from '@angular/material/tooltip';
@NgModule({
imports: [
BrowserAnimationsModule,
MatTooltipModule,
// ...
test.component.html
<div matTooltip="Tooltip!">Hover me</div>
npm i -S hammerjsnpm i -D @types/hammerjsAnd in your app.module.js import hammerjs:
import 'hammerjs';
To view full working example see: https://stackblitz.com/angular/keqjqmxbrbg
I found a memory leak in my application, due to extensive use of mat-tooltip (in a loop). This memory leak can be fixed by removing HammerJS.
For more info and other possible solutions (instead of removing HammerJS) see:
https://github.com/angular/material2/issues/4499
provideAnimations() to app.config.ts but didn't workI had a similar problem. It was fixed when I added the Material theme CSS.
Check the console to see if it has a warning. Try adding the theme CSS to the parent file.
If you see an error indicating no theme was found for material, add one of the material themes, like this one, to the first line of your main CSS file;
@import '@angular/material/prebuilt-themes/deeppurple-amber.css';
I had a totally different issue:
I realized after some time, that the tooltip was showing, but behind the <div> of the popup-window that I was implementing. So I just could not see it.
For me the solution was to bring it to the front by z-index:
::ng-deep .cdk-overlay-container {
z-index: 9999;
}
Problem is in the import statement Here's the correct way:
import { MatTooltipModule} from '@angular/material/tooltip';
MatTooltipModule is the module, and MatTooltip is the Directive itself.See it goes like this, if you have separate module for lazy loading or something, then you should re-import MatTooltipModule there.
For anyone who is rendering elements inside a *ngFor and using matTooltip, I suggest adding TrackBy function. That solved my issue.
"A function optionally passed into the NgForOf directive to customize how NgForOf uniquely identifies items in an iterable." https://angular.io/api/core/TrackByFunction.
In my case, the button was disabled, and so apparently the tooltip doesn't display for disabled buttons.
My problem was that I was trying to use it inside of a mat-label. Removing it from the label worked.
if you use bootstrapApplication() to bootstap your app (Angular version >14), add provideAnimations() to providers[] in app.config.ts
otherwise, add BrowserAnimationsModule to imports[] of the standalone component (or module, in case you don't use standalone components) that uses matToolTip
I had the same kind of issue than @Tom with tooltips for buttons on a jw-modal popover. The tooltips ware displaying underneath the front most layer. You can point that out either by playing with the matTooltipPosition value or with the transparency of the background from the layer on top of which your tooltip should appear.
His solution worked for me except that @Tom was a bit shy with his z-index value. It seems that z-index max value is the one of an integer. Using a 2 billions value should be ok, or maybe 16 millions safer for maximum browser compatibility, at least to check if it fix the issue, there are not so many cases where tooltips shouldn't be on top of anything else. In my case the modal z-index was 10000 so using 10010 instead of 9999 just worked.
An other concern is that ::ng-deep is marked deprecated as of Angular 17 because it violates angular style encapsulation policy if I understood right. I have tested a bunch of alternatives I found online but none of them seem to work. It sounds like any straightforward replacement would by nature break style encapsulation anyway.
For me, there were two issues causing the problem: one was the button being disabled, and the other was a z-index conflict because it was within an overlay panel. I resolved it by adding an extra wrapper <div> and adjusting the CSS.
HTML:
<div [matTooltip]="disableNext() ? 'No more items to load' : ''">
<button
(click)="loadMore()"
[disabled]="disableNext()"
mat-flat-button
color="primary"
>
Load More
</button>
</div>
CSS:
::ng-deep .cdk-overlay-container {
z-index: 9999;
}
One more problem may be if your parent element, or element to which you want to apply tooltip has pointer-events: none CSS property. One more not obvious reason may be the case when component in which resides your "tooltip" element, rerenders each change detection cycle
