单击按钮使matTooltip出现

Question

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

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

这是我的代码：

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

你能告诉我解决这个问题的办法吗？

Answer 1

您可以通过禁用工具提示来实现这一点，点击后在组件中运行一个方法来启用它，运行show((方法，并在一段时间后再次禁用它：

html模板

<button
[matTooltipDisabled]="true"
#myTooltip="matTooltip" 
matTooltip="Action done!"
(click)="displayTooltip()">
</button>

组件.Ts

...
@ViewChild("myTooltip") myTooltip: MatTooltip
...
public displayTooltip(){
this.myTooltip.disabled = false;
this.myTooltip.show()
setTimeout(() => {
this.myTooltip.disabled = true;
}, 1000);
[... other actions ...]
}

我在一个可重复使用的组件中使用了这个，它只是一个将给定值(通常是它旁边的标签(复制到剪贴板的按钮，所以点击会显示工具提示"；复制"当点击时，它就像一个魅力

Answer 2

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

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

Answer 3

您可以在模板上执行此操作。你可以试试这个。

<a mat-button
(click)="tooltip.show()"
#tooltip="matTooltip"
[matTooltipDisabled]="true"
matTooltip="Copied to clipboard"
matTooltipPosition="above"
show
</a>