CSS: борьба с всплывающей подсказкой на боковой панели ⇐ CSS

[Гость]

Я работаю над проектом, в котором у меня есть боковая панель, и когда она свернута, при наведении курсора появляется всплывающая подсказка. Однако, когда

Код: Выделить всё

.sidebar-item-container

’s position is set to

Код: Выделить всё

relative

and

Код: Выделить всё

.sidebar-item-name

’s position is set to

Код: Выделить всё

absolute

, the tooltip does not show outside. It only works when the tooltips are absolutely positioned with relevance to the

Код: Выделить всё

.sidebar-container

.
I have attached the Codepen with the general layout and exact CSS from my project. Let me know if there is another solution. I am using React but would prefer to solve this with CSS only if possible. I tried playing with

Код: Выделить всё

z-index

and

Код: Выделить всё

overflow

with no luck.
My code: Codepen

Код: Выделить всё

.sidebar-item {
position: relative;
color: blue;
display: flex;
justify-content: flex-start;
align-items: center;
font-size: 0.95rem;
font-weight: 500;
border-radius: 8px;
padding: 0.6rem 1rem;
gap: 1rem;
transition: all 0.3s ease;
cursor: pointer;
height: 40px;
z-index: 1;
}

.sidebar-item-collapsed .sidebar-item .sidebar-item-name {
position: absolute;
z-index: 999;
top: 0;
left: 125%;
background-color: black;
padding: 0.2rem 0.75rem;
border-radius: 0.3rem;
border-right: #3f59af 2px solid;
border-bottom: #3f59af 2px solid;
font-weight: 400;
visibility: visible;
}

Источник: https://stackoverflow.com/questions/781 ... p-struggle