When hovering over the first column of the table, a tooltip will appear. Within each material tooltip, I would like to include a button at the bottom right after the JSON data. When this button is clicked, it should open an Angular Material dialog.
<ng-container matColumnDef="Alert">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Alert </th>
<td mat-cell *matCellDef="let row">
<span [matTooltipClass]="{ 'tool-tip': true }"
matTooltip="{{(row?.conditionals)?(row.conditionals | json):''}}">
{{row.Alert}}
</span>
</td>
</ng-container>
Preview Tooltip with Working Example
https://stackblitz.com/edit/angular-mat-tooltip-sktlqk?file=app%2Ftooltip-overview-example.ts
#EDIT1 I have developed a custom tooltip since the Angular Material tooltip did not meet my requirements
https://stackblitz.com/edit/angular-mat-tooltip-u5ir3o?file=app%2Ftooltip-overview-example.ts
The Tooltip Works as Intended
After receiving feedback, I have added data and a button to the tooltip, but there are two remaining challenges:
1) How can I keep the tooltip open as long as the user hovers over it so they can click on the button (currently, the tooltip closes when the user moves away from the first column)
and
2) There is a flickering issue with the tooltip appearing above where it is hovered. I want it to display just below the hovered row in the first column, or above if the row is at the bottom.