通过单击按钮使 matTooltip 出现答案

【问题标题】：Make matTooltip to appear by clicking the button通过单击按钮使 matTooltip 出现
【发布时间】：2021-09-18 07:49:39
【问题描述】：

我想为我的按钮添加一个工具提示，该工具提示只有在我单击此按钮时才会出现。我查看了这个example，但由于某种原因它对我不起作用。

它现在对我有用的方式 - 当我将鼠标悬停在元素上时会出现工具提示。我希望工具提示仅在我单击我的元素后出现。

这是我的代码：

<div class="copy-link">
      <a
        class="padded ch-primary-alt-color ch-hoverable-link"
        target="_blank"
        aria-label="Copy link to the event to clipboard"
        tabindex=0
        matTooltip="Copied to clipboard"
        #tooltip="matTooltip"
        matTooltipPosition="above"
        (click)="tooltip.show()"
        [cdkCopyToClipboard]="shareLink"
      >
      <span class="share-link" tabindex=0 aria-label="Share the link">
        <i
          class="fa fa-link"
          aria-hidden="true"
        >
        </i>
      </span>
      </a>
    </div>

请您提供解决方案吗？

【问题讨论】：

您是否尝试输入该示例中的鼠标进入和离开事件？似乎按预期工作。

标签： angular angular-material

【解决方案1】：

我在这里有一个工作示例，只需添加您提到的解决方案中的事件

https://stackblitz.com/edit/angular-wzdmf8?file=src%2Fapp%2Fbutton-overview-example.html

<a class="padded ch-primary-alt-color ch-hoverable-link" target="_blank"
    aria-label="Copy link to the event to clipboard" tabindex=0 matTooltip="Copied to clipboard" #tooltip="matTooltip"
    matTooltipPosition="above" 
    (mouseenter)="$event.stopImmediatePropagation()"
    (mouseleave)="$event.stopImmediatePropagation()" 
    (click)="tooltip.show()" 
    [cdkCopyToClipboard]="shareLink">

【讨论】：