gpt4 book ai didi

javascript - 如何在 matTooltip 中添加箭头?

转载 作者:行者123 更新时间:2023-12-04 15:50:29 26 4
gpt4 key购买 nike

我正在尝试在 matTooltip 上添加箭头,有任何方法可以在 matTooltip 上添加箭头。

<button mat-raised-button
matTooltip="Info about the action"
aria-label="Button that displays a tooltip when focused or hovered over">
Action
</button>

最佳答案

您需要覆盖 Material 样式。并在伪元素之前/之后添加为箭头。例如,如果您需要为带有左边框和箭头的工具提示设置样式,只需执行类似的操作

.mat-tooltip {
// to make possible place arrow pseudo element outside tooltip with absolute positioning
overflow: visible;
position: relative;
&.right {
border-left: 6px solid red;
margin-left: 5px;
&::before {
position: absolute;
content: '';
display: inline-block;
background-color: red;
clip-path: polygon(50% 0, 0 50%, 50% 100%);
left: -12px;
width: 15px;
height: 15px;
top: 50%;
transform: translateY(-50%);
}
}
}

关于javascript - 如何在 matTooltip 中添加箭头?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51807855/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com