保持自定义工具提示处于打开状态，直到将其悬停在工具提示上并定位到该位置 [英] To keep custom tooltip opened until being hovered upon and positioning of the tooltip

问题描述

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

Upon hovering the first column of the table , a tooltip appears. In every material tooltip I want to insert a button at the bottom right after the json data, and upon clicking on this button it should open a 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>

stackblitz链接与工具提示一起工作

stackblitz link with Tooltip working

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

#EDIT1 我创建了一个自定义工具提示，因为角度材料工具提示没有达到我的目的

#EDIT1 I have created a custom tooltip , as angular material tooltip was not serving my purpose

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

工具提示正在运行

基于注释，我在工具提示中插入了数据和一个按钮，但是我有两件事要做:

Based on comments I have inserted data and a button in tooltip , but I have 2 things to do:

1)如何保持工具提示处于打开状态，直到用户在工具提示打开后将鼠标悬停在工具提示上为止，以便用户可以单击按钮(现在，一旦用户离开第一列，工具提示就会关闭)

1) How to keep the tooltip opened until the time user keeps hovering over the tooltip after tooltip is opened so that user can click on the button(now as soon as user leaves the 1st column the tooltip closes)

和

2)当工具提示在悬停的顶部打开时，会发生工具提示的闪烁(当悬停在第一列上时，如果希望将工具提示放置在悬停的行的底部，并且如果平移的行位于底部，则工具提示仅会打开悬停的行上方)

2) Flickering of tooltip occurs as the tooltip opens on top where it is hovered(wanted to place tooltip just at the bottom of the hovered row when first column is hovered upon and if the hovred row is at bottom then tooltip opening just above the hovered row )

推荐答案

由于您要创建自定义MatTooltip和TooltipComponent，因此我想在此方面解决问题.

Because you are creating a custom MatTooltip and TooltipComponent, I wanted to solve the problem with that in mind.

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

I would at least, at a minimum, extend the TooltipCompenent in your CustomToolTipComponent as this allows you to leverage existing logic in your directive.

export class CustomToolTipComponent extends TooltipComponent

我对您的指令做了很多更改，并做出了最好的注释，以概述这些更改的作用.从本质上讲，它遵循您自己的指令的思想，同时利用了扩展TooltipComponent的扩展逻辑.

I made a lot of changes to your directive and made notes best I could to outline what those changes are doing. Essentially it is following the idea of your own directive while leveraging the extended logic from the extended TooltipComponent.

如果我要从头开始写这篇文章，我会探索扩展 MatTooltip类，并且不会与CustomToolTipComponent混淆 在使用尽可能多的默认值的同时，可能有一种方法可以完成此操作 逻辑.

If I were to write this from scratch, I would explore extending the MatTooltip class and not mess with the CustomToolTipComponent as there may be a way to accomplish this, while using as much default logic as possible.

但是，这可以解决所有未完成的操作项，并为您提供足够的继续执行的条件.

This, however, resolves all outstanding action items and gives you enough to go on.

STACKBLITZ

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

这篇关于保持自定义工具提示处于打开状态，直到将其悬停在工具提示上并定位到该位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！