带图标的材料提示在手机上不起作用

Question

我将 angular 7 与材料一起使用，我想创建一个带有信息图标的输入字段，最终使用 matSuffix 这是一个工具提示。它适用于台式机，但不适用于手机。

我创建了一个堆栈闪电战：https ://angular-ncv2mp.stackblitz.io/ 我也尝试使用按钮，但它也不起作用。

有谁能够帮助我？

Answer 1

当我们在桌面工具提示显示上工作时，将鼠标悬停在该特定元素上。

但是在移动设备上 - 工具提示在长按该特定元素时起作用。请试试这个。

如果这不起作用，请更新我将提供其他方式。

Answer 2

默认情况下，MatTooltip 可以通过长按手势在移动设备上正确打开。

但我也建议在单击按钮时实现工具提示的切换隐藏/显示，就像这样 - 因为许多移动用户不明白他们需要长按才能看到工具提示：

<button type="button" matTooltip="I am a tooltip!" #tooltip="matTooltip" (click)="tooltip.toggle()" ...

这样，两种解决方案都适用于移动设备：工具提示的长按和单选项卡切换。