[Tooltip] How to pass data dynamically to [mtxTooltip] directive ?

See original GitHub issue

Its possible to pass data dynamically inside of mtxTooltip directive to use it into template?

  • example
<div *ngFor="let result of searchResults">
  <button mat-raised-button 
    // how to pass custom data inside #tooltipTpl here ?
    [mtxTooltip]="tooltipTpl:result.image">
    Action
  </button>
</div>

<ng-template #tooltipTpl>
   // how to get here the data arguments ?
   <img src="result.image">
</ng-template>

Issue Analytics

  • State:closed
  • Created 9 months ago
  • Comments:9 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
nzbincommented, Dec 22, 2022

I created an online example for v14 and I donโ€™t find any issues. https://stackblitz.com/edit/angular-ivy-2kqseo?file=src%2Fapp%2Fapp.component.ts

1reaction
AlonsoK28commented, Dec 22, 2022

I think the popover is better than tooltip if you want to show the image.

Looks amazin ๐Ÿ˜Ž

image

Read more comments on GitHub >

github_iconTop Results From Across the Web

Dont we have option for dynamic content inside mat-tooltip?
I have recently implemented a custom tooltip directive which ... mat-tooltip of Angular Material does not support to passing a template.
Read more >
Tooltip Dynamic - StackBlitz
Starter project for Angular apps that exports to the Angular CLI.
Read more >
Tooltip - Angular Material
MatTooltip. Directive that attaches a material design tooltip to the host element. Animates the showing and hiding of a tooltip provided position (defaults...
Read more >
Angular Material Tooltip: mat Tooltip example
Change the mat tooltip content dynamically in Angular. To change the tooltip content dynamically we can bind a variable or pass a method...
Read more >
How to use matTooltip in Angular Material ? - GeeksforGeeks
After completing the installation, Import 'MatTooltipModule' from '@angular/material/tooltip' in the app.module.ts file.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found