有没有办法可以将工具提示设置为在焦点上而不是悬停时可见?
我试图从 Angular 官方文档中理解并搜索类似的问题,包括这个 Always Show Tooltip ( Angular Material2) ,但到目前为止我还没有看到任何有用的东西。
我的代码是:
<input
matTooltipPosition="above"
matTooltipClass="my-tooltip"
matTooltip='Fill in the field and then click "Enter"'
(focus)="tooltip.show()"
#tooltip="matTooltip">
我也尝试过 TooltipVisibility = "Visible"
但没有成功
最佳答案
如果触发焦点事件,工具提示将消失。
您可能有两种解决方法:
a.将工具提示放在隐藏元素(即 div)上,并使其显示在输入焦点上。但输入不应该有任何工具提示:
HTML:
<input (focus)="tooltip.show()">
<div class="hiddenTooltip"
matTooltipPosition="below"
matTooltipClass="my-tooltip"
matTooltip='Fill in the field and then click "Enter"'
#tooltip="matTooltip">
</div>
CSS:
.hiddenTooltip {
position: absolute;
visibility: hidden;
left: 0;
width: 0;
top: 3em
}
<小时/>
b.制作一个用 ngIf 显示/隐藏的假工具提示:
HTML
<input (focus)="show=true" (blur)="show=false">
<div #tooltip *ngIf="show" class="fakeTooltip">
Fill in the field and then click "Enter"
</div>
CSS:
.fakeTooltip {
background: rgb(65, 64, 64);
border-radius: 0.25em;
padding: 0.75em;
display: block;
z-index: 2;
color: white;
height: fit-content;
width: fit-content;
}
关于angular - 如何使 MatTooltip 在焦点上而不是悬停时可见?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54169184/