Materialize: Feature Request : Please add arrow/triangle in tooltips

[baadillahnabil]

please add arrow/triangle in tooltips..

*i apologize if my english is bad :)

[aristopopulus]

This easily acomplish with a little css:

.material-tooltip {
    padding: 5px 20px 20px;
    border-radius: 10px;
    background: rgba(37, 36, 36, 0.9);
    overflow: visible;
}

.material-tooltip .backdrop {
    display: none !important;
}

.material-tooltip:after {
    position: absolute;
    content: " ";
    top: 100%;
    left: 50%;
    margin-left: -8px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 13px 0 13px;
    border-color: rgba(37, 36, 36, 0.9) transparent transparent transparent;
}

[rameshevol]

this css is working only for align="bottom"......What about "Left", "Top", "Right"..?

[JonathanFu]

Overriding .material-tooltip can change tooltip style, but it will apply all tooltips.
Most of time we want different style for different component, like above @rameshevol mentioned, the arrow is applied to all tooltips.
I haven't found a way we can pass css to add into the below class (.material-tooltip) and custom the style.
<div class="material-tooltip" style="top: 2776.75px;left: 1253.94px;visibility: visible;opacity: 1;transform: translateX(0px) translateY(0px);"><div class="tooltip-content">I am a tooltip</div></div>

Pass custom class likes below.

[AbiSubbiah]

tried it as like @aristopopulus suggested. but still not getting

https://stackblitz.com/edit/angular-tooltip-material-bq8afq?file=src/app/tooltip/basictooltip.html