Angular Material Tooltip - is it possible to embed an image in a mat-tooltip?-CodePudding

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.

CodePudding user response：

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 >
  <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 >هذا قالب!</div>
</div>
</ng-template>

Working example: https://stackblitz.com/edit/angular-3wa7ea-ksuij3?file=src/app/tooltip-auto-hide-example.html