CSS：侧边栏工具提示斗争

Question

我正在开发一个项目，其中有一个侧边栏，当它折叠时，悬停时会出现一个工具提示。但是，当

.sidebar-item-container

的位置设置为

relative

并且

.sidebar-item-name

的位置设置为

absolute

时，工具提示不会显示在外部。仅当工具提示绝对定位于与

.sidebar-container

相关时，它才有效。

我已附上 Codepen，其中包含我的项目的总体布局和精确的 CSS。让我知道是否还有其他解决方案。我正在使用 React，但如果可能的话，我更愿意使用 CSS 来解决这个问题。我尝试玩

z-index

和

overflow

但没有运气。

我的代码：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

为了显示工具提示，我将以下类添加到您的代码中：

更新了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;
}

请注意，您可能想调整工具提示的位置，但这是悬停时显示的