如何在 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>

Answer 1

根据 Material 设计的用法，箭头不包含在 angular 工具提示组件中。在这里你可以看看你可以做什么和不可以使用工具提示 https://material.io/components/tooltips/

Answer 2

您需要覆盖 material 样式。并添加 before/after 伪元素作为箭头。例如，如果您需要使用左边框和箭头设置工具提示的样式，只需执行类似的操作

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

如何在 matTooltip 中添加箭头？

How to add arrows in matTooltip?

javascript

tooltip

angular-material

angular