CSS: Sidebar Tooltip Struggle

Question

I am working on a project where I have a sidebar and when it is collapsed, a tool tip appears on hover. However, when .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;
}

Answer 1

In order to get the tooltip to show I added the following classes to your code:

Updated Codepen

.random:hover .tooltip {
  display: block;
}

.tooltip {
    display: none;
    color: red;
    margin-left: 5px; /* moves the tooltip to the right */
    margin-top: 5px; /* moves it down */
    position: absolute;
    z-index: 1000;
}

Note you may want to play with the positioning of the tooltip but this is it displaying on hover