Я использую Angular - Clarity с карточками и всплывающей подсказкой.
См. URL - https://stackblitz.com/edit/clarity-wio9hp
Здесь всплывающая подсказка скрыта внутри карты ... Мне нужна только всплывающая подсказка, чтобы отображалась или не обрезалась над картой, внутри содержимого должно быть прокрутка / авто переполнения ..
На самом деле я искал много ответов, но у меня это не работает ..
.tooltip-content имеет position: relative, поэтому он всегда будет отображаться внутри карты.
Альтернативным решением может быть отображение всплывающей подсказки в зависимости от положения мыши.
Сделайте всплывающую подсказку position: fixed, чтобы она отображалась вне поля.
.tooltip-content {
position: fixed!important;
}
Чтобы всплывающая подсказка располагалась в нужном месте, потребуется специальный код. Но вы можете сделать это в зависимости от положения мыши. См. Этот пост: Координаты мыши Angular 4 Observables
Привяжите стиль элемента сверху и слева к элементу всплывающей подсказки, и всплывающая подсказка будет следовать за курсором вашей мыши: <span class="tooltip-content" [style.top]="mouseY + 'px'" [style.left]="mouseX + 'px'"> Конечно, для остальных элементов потребуется еще немного стили, чтобы они отображались аккуратно.
См. https://stackblitz.com/edit/clarity-aogelj в этом примере первый покажет, что я имею в виду.
Вы также можете получить координаты элемента <a>, над которым в данный момент наведен курсор. И отобразите всплывающую подсказку с position: fixed и top: elementY px left: elementX px. Способы получения элемента DOM описаны здесь: Как получить элемент dom в угловой 2
