[英]How to add arrows in matTooltip?
I'm trying to add arrows on matTooltip, there is any way to add arrows on matTooltip.我正在尝试在 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>
You need to override material styles.您需要覆盖材质样式。 and add before/after pseudo-element as arrow.
并在伪元素之前/之后添加箭头。 For example if you need to style a tooltip with left border and arrow just do something like that
例如,如果您需要使用左边框和箭头设置工具提示的样式,只需执行类似的操作
.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%);
}
}
}
Following the usage of Material Design, arrows are not included in angular tooltip component.使用 Material Design 后,角度工具提示组件中不包含箭头。 Here you could take a look what you can do and not to do with tooltips https://material.io/components/tooltips/
在这里,您可以看看工具提示可以做什么,不能做什么https://material.io/components/tooltips/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.