To keep custom tooltip opened until being hovered

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 link with Tooltip working

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

#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

Tooltip is working

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

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)

and

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 )

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

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

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.

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