Html 侧边栏工具提示在锚悬停时不显示

当用户将鼠标悬停在侧边栏导航项上时，我正在尝试实现工具提示功能。它当前正在DOM中渲染，但无论我在样式中更改了什么，都无法使其显示。我尝试添加了一个

z-index

，更改了显示和位置属性，但没有成功。有没有CSS专家知道这是什么原因？链接到代码笔

HTML:

<script src="https://kit.fontawesome.com/b61e574d7a.js"></script>

<div class="sidebar">
  <a href="#">
    <i class="fas fa-home"></i>
    <span class="tooltip">Home</span>
  </a>
  <a href="#">
    <i class="fas fa-chess-queen"></i>
    <span class="tooltip">Crown</span>
  </a>
  <a href="#">
    <i class="fas fa-history"></i>
    <span class="tooltip">History</span>
  </a>
  <a href="#">
    <i class="fas fa-paper-plane"></i>
    <span class="tooltip">Send</span>
  </a>
  <div class="sidebar-bottom">
    <a href="#">
      <i class="fas fa-comment-dots"></i>
      <span class="tooltip">Send feedback</span>
    </a>
    <a href="#">
      <i class="fas fa-user-circle preferences"></i>
      <span class="tooltip">Preferences</span>
    </a>
  </div>
</div>

<div id="main">
  hello
</div>

body {
  font-family: "Lato", sans-serif;
}

.sidebar {
  height: 100%;
  width: 75px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #7b68ee;
  transition: 0.5s;
  overflow-x: hidden;
  padding-top: 20px;
  white-space: nowrap;

  a {
    position: relative;
    left: 17.5%;
    text-decoration: none;
    text-align: center;
    font-size: 25px;
    border-radius: 90px;
    width: 20%;
    color: #ffffff;
    display: block;
    margin-bottom: 10px;
    height: 50px;
    width: 50px;

    &:hover {
      background: #ffffff1a;
      transition: 0.3s;
    }

    .fa, .far, .fas {
      line-height: 50px;
    }

    .tooltip {
      display: inline-block;
      position: absolute;
      background-color: black;
      padding: 8px 15px;
      border-radius: 3px;
      margin-top: -26px;
      left: 90px;
      opacity: 0;
      visibility: hidden;
      font-size: 13px;
      letter-spacing: .5px;

      &:before {
        content: '';
        display: block;
        position: absolute;
        left: -4px;
        top: 10px;
        transform: rotate(45deg);
        width: 10px;
        height: 10px;
        background-color: inherit;
      }
    }

    &:hover {
      background-color: green;

      .tooltip {
        visibility: visible;
        opacity: 1;
      }
    }

    &.active {
      background-color: pink;

      i {
        color: purple;
      }
    }   
  }

  .sidebar-bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    margin-bottom: 0;
  }
}

---

我对您的代码进行了调整，以使其正常工作。在

：悬停

，将通过

display:block

显示默认的

显示：无

。你指的是锚dirCurt，但是你应该考虑锚中的<代码>跨度>代码>（<代码> A/COD>）元素。

。工具提示{
字体大小：10px；
背景色：rgba（0,0,0,3）；
位置：绝对位置；
排名：0；
转换：翻译（-50%，-50%）；
左：50%；
显示：无；
填充物：2px4px；
}
悬停。工具提示{
显示：块；
}

有关问题的解决方案，请参阅此代码段

正文{
字体系列：“Lato”，无衬线；
}
.侧边栏{
身高：100%；
宽度：75px；
位置：固定；
排名：0；
左：0；
背景色：#7b68ee；
溢出x：隐藏；
填充顶部：60px；
空白：nowrap；
}
.侧边栏a{
位置：相对位置；
左：17.5%；
文字装饰：无；
文本对齐：居中；
字体大小：25px；
边界半径：90px；
宽度：20%；
颜色：#ffffff；
显示：块；
边缘底部：10px；
高度：50px；
宽度：50px；
}
主。侧边栏{
位置：绝对位置；
排名：0；
右：25px；
字体大小：36px；
左边距：50像素；
}
#主要{
填充：16px；
左边距：85像素；
过渡：左边距0.5s；
}
.侧边栏底部{
位置：绝对位置；
底部：0；
宽度：100%；
边缘底部：4rem；
}
法先生，
远的
.fas{
线高：50px！重要；
}
.工具提示{
字体大小：10px；
背景色：rgba（0,0,0,3）；
位置：绝对位置；
排名：0；
转换：翻译（-50%，-50%）；
左：50%；
显示：无；
填充物：2px4px；
}
悬停。工具提示{
显示：块；
}

你好

删除

overflow-x:hidden

from.sidebar类，并在

.sidebar a.tooltip{top:10px；left:70px；}

中进行一些更改，并为

#main{padding left:75px；width:100%；}

CSS

正文{
字体系列：“Lato”，无衬线；
}
.侧边栏{
身高：100%；
宽度：75px；
位置：固定；
z指数：1；
排名：0；
左：0；
背景色：#7b68ee；
过渡：0.5s；
填充顶部：20px；
空白：nowrap；
}
.侧边栏a{
位置：相对位置；
左：17.5%；
文字装饰：无；
文本对齐：居中；
字体大小：25px；
边界半径：90px；
宽度：20%；
颜色：#fff；
显示：块；
边缘底部：10px；
高度：50px；
宽度：50px；
}
.侧边栏a：悬停{
背景#fff1a；
过渡：0.3s；
}
.sidebar a.fa、.sidebar a.far、.sidebar a.fas{
线高：50px；
}
.侧边栏a.工具提示{
显示：内联块；
位置：绝对位置；
背景色：黑色；
填充：8px 15px；
边界半径：3px；
顶部：10px；
左：70像素；
不透明度：0；
可见性：隐藏；
字体大小：13px；
字母间距：0.5px；
}
.侧边栏a.工具提示：在{
内容：''；
显示：块；
位置：绝对位置；
左：-4px；
顶部：10px；
变换：旋转（45度）；
宽度：10px；
高度：10px；
背景色：继承；
}
.侧边栏a：悬停{
背景颜色：绿色；
}
.侧边栏a:悬停。工具提示{
能见度：可见；
不透明度：1；
}
.侧边栏a.激活{
背景颜色：粉红色；
}
.侧边栏{
颜色：紫色；
}
.侧边栏.侧边栏底部{
位置：绝对位置；
底部：0；
宽度：100%；
页边距底部：0；
}
#主要{
左侧填充：75px；
宽度：100%；
}

你好