Всем привет подскажите, пожалуйста, что делать с таким кейсом... Есть таблица,

контейнер которой имеет свойство overflow: auto;
Если в таблице есть tooltip, то он обрезается по границам контейнера.
Как сделать так, чтобы не обрезался?

.table-wrapper {
box-sizing: content-box;
display: flex;
flex-direction: column;
max-height: var(--table-height);
overflow: auto;
}

.castom_tooltip {
color: var(--on_primary);
text-align: center;
position: relative;
background: var(--primary);
padding: 4px 4px;
border-radius: 4px;
transition: 0.3s;
}

.castom_tooltip .castom_tooltiptext {
font-size: 14px;
font-family: 'Font2';
padding: 8px;
line-height: 140%;
width: 300px;
transform: translateX(-50%);
bottom: calc(100% + .2em);
bottom: -webkit-calc(100% + .2em);
left: 50%;
position: absolute;
display: block;
pointer-events: none;
border-radius: 8px;

}

:hover { overflow: visible }

Может x-index повысить, "приподнять" над другими элементами

z-index в смысле? В данном случае это не работает, к сожалению.

Писать скрипт, который будет рендерить tooltip в body и абсолютно позиционировать подсказку относительно него.

возможно еще закинуть tooltip компонет повыше, может даже в корень всего этого действия.. отрисовывать его через position: fixed. и поиграть с координатами которые можно получить из события e или покомбинировать еще с координатами элемента с которого сработает событие. getBoundingClientRect. tooltip показывать на события focusin focusout или focusenter focusleave,. надо выбрать какой подойдет, одно всплывает. второе нет. 😃 использоваться store для контроля

В общем, если кому вдруг интересно, сделала это вот так: <script> function breakOverflow(elm, e, stateName) { if (stateName === Table) { let top = e.clientY; let left = e.clientX; elm.css({ position: "fixed", left: left + "px", top: top + "px", bottom: "auto", right: "auto", "z-index": 10000, }); } } function restoreCss(elm) { elm.css({ position: "", left: "", top: "", bottom: "", right: "", "z-index": "", }); } <script> . . . <div on:mouseenter={(e) => breakOverflow(jQuery(".castom_tooltiptext"),e,state.name)} on:mouseleave={() => restoreCss(jQuery(".castom_tooltiptext"))} ></div> Спасибо всем за советы.

я не в контексте но жквери лишним выглядит

Да, переделала потом без jQuery))