Прикрепить CSS треугольник к MatTooltip в зависимости от фактического позиционирования?

Question

Я ломал свой мозг, чтобы найти способ прикрепить маленький CSS треугольник к MatTooltip в Angular, который переключается с top, когда подсказка отображается под элементом хоста (по умолчанию) в bottom, когда всплывающая подсказка находится над элементом хоста (например, когда элемент хоста находится слишком близко к нижней части области просмотра).

Я пропустил какое-то свойство, которое дал бы мне способ переключить класс CSS? Или это просто невозможно?

Любая помощь будет высоко оценена.

Answer 1

Это возможно.

Поскольку MatTooltip контролирует свое позиционирование через transform-origin, вы можете использовать его.

Например, .mat-tooltip[style*="transform-origin: left center"] только выбирает всплывающие подсказки отображаются справа от его родителя, поэтому вы можете отобразить треугольник с левой стороны всплывающей подсказки.

Значения transform-origin:

• Подсказка справа от родителя: left center
• Подсказка слева от родителя: right center
• Подсказка над родителем: center top
• Подсказка ниже его родитель: center bottom

Answer 2

Добро пожаловать в SO!

Хотя вы можете использовать css, чтобы нарисовать заостренный треугольник в mat-tooltip, но вы не можете переместить его положение в соответствии с представлением View-port / DOM, как выше или ниже, так что это не так можно перемещать заостренный треугольник.

Решение:

Я использовал SAT Popover для стилей подсказок. Вы можете назначить ему компонент angular, и он будет отображаться в том виде, в каком вы его стилизуете.

https://ncstate-sat.github.io/popover/