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

Question

我正在尝试在 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>

标签： javascriptangularangular-materialtooltip

Answer 1

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

.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%);
        }
    }
}