2

Trying to add tooltip to angular material calendar dates.I tried with matToolTip but nothing comes up on hover.

<mat-calendar [dateClass]="dateClass()" [startAt]="month" [selected]="selectedDate"
      (selectedChange)="onSelect($event)"  matTooltip="Info about the action">
    </mat-calendar>
developer
  • 301
  • 3
  • 14
  • Do you have the MatTooltipModule imported somewhere? – Kyle Anderson Jan 06 '20 at 20:59
  • are you asking about https://stackoverflow.com/questions/59458789/angular-material-date-picker-how-to-show-the-title/59461291#59461291 ? – Eliseo Jan 06 '20 at 22:38
  • Doesnt this show the same tooltip message regardless where the mouse cursor is hovering on any day cell? Is it possible to show different tooltip messages on different days? – chitgoks Aug 02 '23 at 09:36

1 Answers1

-1

Please see this StackBlitz example. I've played around with the imports and configuration and the only surprising thing I found was that a material theme was required before the tooltip would appear. See the following in the styles.scss:

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

Other than that, I've found that the following imports are required:

  • BrowserAnimationsModule
  • MatDatepickerModule
  • MatNativeDateModule (or some other date provider)
  • MatTooltipModule
Frederick
  • 832
  • 6
  • 14
  • Its not displaying anything to me – developer Jan 07 '20 at 15:06
  • What browser are you using? – Frederick Jan 07 '20 at 15:22
  • I see the tooltip fine in Chrome & FireFox. I'm suspecting there's something else going on with your browser or maybe some company proxy in that case. I'd suggest checking the console for any errors or the network tab to check if something is being blocked. – Frederick Jan 07 '20 at 15:26