169 похожих чатов

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

контейнер которой имеет свойство 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;

}

8 ответов

24 просмотра

:hover { overflow: visible }

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

Tatiana-S Автор вопроса
Alex P
Может x-index повысить, "приподнять" над другими ...

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

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

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

Tatiana-S Автор вопроса
Egor Demeshko
возможно еще закинуть tooltip компонет повыше, мож...

В общем, если кому вдруг интересно, сделала это вот так: <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> Спасибо всем за советы.

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

Tatiana-S Автор вопроса

Похожие вопросы

Обсуждают сегодня

Добрый день. Хочу сделать отрисовку по команде на панели. Почему-то рисуется только при втором вызове. С чем может быть связано, не подскажете? procedure TForm1.FormDblClick(...
Kirill Filippenok
20
а зачем этот вопрос для удаления из чата?
Mёdkinson Medvezhkin
63
А почему в си некоторые вещи работают с двойными кавычками некоторые с одинарными? Нельзя было все сделать с одними или чтоб работало с разными? например чтоб выводить строки ...
.
15
Всем привет! Нужен совет от опытных. Переношу свой проект с Делфи 10.2 Токио на Лазарус 3.2 установленный через инсталлятор fpcupdeluxe-x86_64-win64. При импортировании проект...
Дмитрий Завгородний
7
Всем привет! procedure TForm1.FormCreate(Sender: TObject); type TStartEnd = record S: Byte; E: Byte; end; var a, b: TStartEnd; begin {1} a.S := 1; {2} a.E := 2; ...
Руслан Михайлович
10
Всем привет!) я тут новенький и пытаюсь освоить evolution методом тыка. У меня при переходе между папками файлов выскакивают вот такие уведомления Можете подсказать как их от...
Диман Samoed
10
Эх кто-то пришел и весь праздник испортил :( You need complex FBX scene importing setup to change things on import? good luck with that. You need navigation and pathfinding? g...
Serg Gini
5
Всем привет! Подскажите. Я написал приложение на Delphi 10.2 Tokyo под Windows 10. И передо мной стал вопрос о том чтобы сделать это приложение кроссплатформенным (под Linux и...
Дмитрий Завгородний
24
Какого хера? /Sources/App/Modules/User/Models/UserLinkApple.swift:21:20: warning: stored property '_id' of 'Sendable'-conforming class 'UserLinkApple' is mutable @ID(...
Alexander Sherbakov
14
Привет всем. Подскажите где можно посмотреть, какая версия электрон, поддерживает версии windows? Некий changelog. Мне бы желательно, поддержку 7,8,10... latest, как понимаю и...
Anonym Squad
21
Карта сайта