如何用HTML和CSS实现侧边栏LI元素的右侧箭头提示框

问题描述 #

我用UL/LI制作左侧导航栏，希望鼠标悬停LI元素时，在其外侧右侧显示Tooltip提示框，但当前实现的Tooltip会占据LI整个区域，不符合预期。页面结构包含side-menu容器，内部有side-bar-left和side-bar-right，side-bar-left下的logo列表LI内有图标，期望Tooltip显示在LI右侧外侧，与LI保持一定间距且垂直居中。

当前代码 #

HTML代码 #

<nav class="side-menu">
    <div class="side-bar-left">
      <ul class="logo">
        <li>
          <a href="#">
            <img class="logo-image" src="/images/logo.png" alt="" />
          </a>
          <span class="tooltiptext">Messages</span>
        </li>
      </ul>

     <div class="side-bar-right">
     
     </div>
</nav>

CSS代码 #

.logo li {
      position: relative;
      /* Adăugați această proprietate pentru a face elementul <li> relativ pozitionat */
    }

    .logo li .tooltiptext {
      visibility: hidden;
      width: 120px;
      background-color: black;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px 0;
      position: absolute;
      z-index: 1;
      top: -40px;
      /* Plasați tooltip-ul deasupra elementului <li> */
      left: 50%;
      /* Plasați tooltip-ul în centrul elementului <li> */
      transform: translateX(-50%);
      opacity: 0;
      transition: opacity 0.3s, visibility 0s 0.3s;
      /* Am adăugat o întârziere pentru a face tooltip-ul să dispară mai încet */
    }

    .logo li:hover .tooltiptext {
      visibility: visible;
      opacity: 1;
      transition-delay: 0s;
      /* Anulăm întârzierea pentru a face tooltip-ul să apară imediat la hover */
    }

解决方案 #

调整Tooltip的定位属性，即可实现预期效果：

• 移除left: 50%和transform: translateX(-50%)，改为left: calc(100% + 8px)，让Tooltip从LI右侧外侧开始定位，同时保留8px间距避免紧贴；
• 将top: -40px改为top: 50%，并添加transform: translateY(-50%)，让Tooltip垂直居中于LI元素；
• 保留原有的过渡效果，保证显示/隐藏的平滑性。

修改后的CSS代码：

.logo li {
  position: relative;
}

.logo li .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  /* 垂直居中于LI */
  top: 50%;
  transform: translateY(-50%);
  /* 定位到LI右侧外侧，保留8px间距 */
  left: calc(100% + 8px);
  opacity: 0;
  transition: opacity 0.3s, visibility 0s 0.3s;
}

.logo li:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

内容的提问来源于stack exchange，提问作者oterge ristere