I've been wrecking my brain to figure out a way to attach a little CSS triangle to a MatTooltip in Angular that switches from being at the top when the tooltip is displayed below the host element (default) to being at the bottom when the tooltip is above the host element (e.g. when the host element is too close to the bottom of the viewport).
Am I missing some property that would give me a way to switch the CSS class? Or is it simply impossible?
Any help would be highly appreciated.
It is possible.
Since MatTooltip controls its positioning via transform-origin, you can make use of it.
For example, .mat-tooltip[style*="transform-origin: left center"] only selects tooltips shown to the right of its parent, so you can display the triangle on the left side of the tooltip.
Values of transform-origin:
left centerright centercenter topcenter bottom