How to add arrows in matTooltip?

Question

I'm trying to add arrows on matTooltip, there is any way to add arrows on 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

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

Answer 2

Following the usage of Material Design, arrows are not included in angular tooltip component. Here you could take a look what you can do and not to do with tooltips https://material.io/components/tooltips/