保持自定义工具提示打开，直到悬停在工具提示上并定位

Question

将鼠标悬停在表格的第一列时，会出现一个工具提示。 在每个材质工具提示中，我想在 json 数据之后的右下角插入一个按钮，单击此按钮后，它应该会打开一个角度材质对话框。

<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>

带有 Tooltip 的 stackblitz 链接工作

https://stackblitz.com/edit/angular-mat-tooltip-sktlqk?file=app%2Ftooltip-overview-example.ts

#EDIT1 我创建了一个自定义工具提示，因为角度材料工具提示不符合我的目的

https://stackblitz.com/edit/angular-mat-tooltip-u5ir3o?file=app%2Ftooltip-overview-example.ts

工具提示有效

基于 cmets，我在 tooltip 中插入了数据和一个按钮，但我有两件事要做：

1) 如何保持工具提示打开，直到用户在打开工具提示后一直将鼠标悬停在工具提示上，以便用户可以点击按钮（现在只要用户离开第一列，工具提示就会关闭）

和

2) 工具提示闪烁发生在工具提示在其悬停的顶部打开时（希望在第一列悬停时将工具提示放置在悬停行的底部，如果悬停行位于底部，则工具提示仅打开在悬停的行上方）

Answer 1

因为您正在创建自定义 MatTooltip 和 TooltipComponent，所以我想解决这个问题。

我至少会在您的CustomToolTipComponent 中扩展TooltipCompenent，因为这允许您利用指令中的现有逻辑。

export class CustomToolTipComponent extends TooltipComponent

我对您的指令进行了很多更改，并尽我所能做笔记以概述这些更改的作用。本质上，它遵循您自己指令的想法，同时利用扩展 TooltipComponent 中的扩展逻辑。

如果我要从头开始写这篇文章，我会探索扩展 MatTooltip 类，不要与CustomToolTipComponent 混淆 可能有一种方法可以做到这一点，同时使用尽可能多的默认值 尽可能符合逻辑。

然而，这会解决所有未完成的操作项，并为您提供足够的继续。

---

堆栈闪电战

https://stackblitz.com/edit/angular-mat-tooltip-b2jalw?embed=1&file=app/tool-tip-renderer.directive.ts