Как расположить «абсолютный» элемент так, чтобы он не прятался за границами flexbox?

Question

[Константин]

на фотографии: подсказка, расположенная через position: absolute и немного магии для расположения её по центру. Подсказка находится в элементе flexbox. Сразу видна проблема - т.к. подсказка находится "по центру", она магическим образом не просто выходит за рамки контейнера, но и "прячется" за этими рамками. z-index не помог, к сожалению.

Непонятно как решать, потому что сколько не пытался найти такую же проблему на том же stackoverflow, нигде нет моего примера.

Надеюсь, что кода CSS для .tooltip хватит:

.tooltip {
background-color: #212121bf;
opacity: 0;
visibility: hidden;
position: absolute;
border-radius: 8px;
color: #cacdff;
width: max-content;
bottom: 24px;
padding: 4px 8px;
left: 1ch;
font-size: 0.8em;
transform: translate(-50%, 0%);
                    }

Надеюсь, кто-нибудь поможет.

Comments

[Сергей delphinpro]

никто не поможет. ваш код не в тему.

Answer 1

[IvanU7n]

никак, если не отменить overflow: hidden на предке, в границах которого обрезается подсказка, или не вынести подсказку из этого предка