I'm currently trying to find the best way to display an corresponding image when hovering some sort of text in Angular. I thought about embedding the image in a mat-tooltip but couldn't figure out if it is possible to do it this way.
Is it even possible and if yes, how do I do that? If not, do you guys know a smart way to do it without a mat-tooltip?
Thanks a lot.
You would need to implement custom template, which material tooltip doesn't support out of the box. There are workarounds if you look around though.
A simpler way would be to use package, that supports templates however.
https://ng-matero.github.io/extensions/components/tooltip/overview
<h2>Tooltip with template</h2>
<mat-form-field class="example-user-input">
<mat-label>Tooltip position</mat-label>
<mat-select [formControl]="position">
<mat-option *ngFor="let positionOption of positionOptions" [value]="positionOption">
{{positionOption}}
</mat-option>
</mat-select>
</mat-form-field>
<button mat-raised-button
[mtxTooltip]="tooltipTpl"
[mtxTooltipPosition]="position.value"
aria-label="Button that displays a tooltip in various positions">
Action
</button>
<ng-template #tooltipTpl>
<div style="background: gray">
<img src="https://icons-for-free.com/download-icon-angular-1321215611022593855_256.png" alt="">
<div>This is a template!</div>
<div>Ceci est un modèle!</div>
<div>这是一个模板!</div>
<div>これはテンプレートです!</div>
<div class="text-right">هذا قالب!</div>
</div>
</ng-template>
Working example: https://stackblitz.com/edit/angular-3wa7ea-ksuij3?file=src%2Fapp%2Ftooltip-auto-hide-example.html
