CODEWITHSUNDEEP
angularangular-materialtooltip
Display name
Display name

Reputation: 1542

Angular material tooltip does not display as expected

I've been rummaging around various tutorial sites trying to get material tool tips to work. Super frustrating because it looks really easy. The console displays no errors or warnings. I'm using Angular 11. It is my understanding that once I've imported the MatTooltipModule into my app.module.ts then this functionality will be available for all components in the same module.

npm list @angular/core
[email protected] C:\source\finfo
+-- @angular/[email protected]
`-- [email protected]
  `-- @angular/[email protected]
npm list @angular/material
C:\source\finfo
`-- @angular/[email protected]

....app.module.ts....
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';
import { MatCardModule } from '@angular/material/card';
import { MatButtonModule } from '@angular/material/button';
import { MatTooltipModule } from '@angular/material/tooltip';
....app.module.ts....
imports: [
    HttpClientModule,
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    MatButtonModule,
    MatCardModule,
    MatTooltipModule,
    ReactiveFormsModule,
    RouterModule.forRoot(appRoutes),

....store.html....
<div>
  <button matTooltip="Info about the action"
      matTooltipPosition="above"
      class="example-button">
      Action
  </button>
</div>

Update: The answer provided by Zunayed Shahriar is correct. One small addendum, for what ever reason, my project started working with the tooltip after I moved the @import statement up to the top of the .css file.

Upvotes: 0

Views: 4316

Answers (1)

Zunayed Shahriar
Zunayed Shahriar

Reputation: 2723

Working fine for me.

Make sure that you import material CSS (depending on your theme) at your styles.css file.

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Demo at StackBlitz.

Result:

enter image description here

Upvotes: 3

Related Questions