侧边栏工具提示未显示在锚点悬停时

Question

当用户将鼠标悬停在侧边栏导航项上时，我目前正在尝试实现工具提示功能。它目前正在 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>

SCSS：

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;
}
}

Answer 1

我对您的代码进行了调整以使其正常工作。在:hover，具有默认display: none的span将通过display: block显示。你指的是锚点，但你应该考虑锚点(a(元素内部的span。

.tooltip {
font-size: 10px;
background-color: rgba(0, 0, 0, .3);
position: absolute;
top: 0;
transform: translate(-50%, -50%);
left: 50%;
display: none;
padding: 2px 4px;
}
a:hover .tooltip {
display: block;
}

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

body {
font-family: "Lato", sans-serif;
}
.sidebar {
height: 100%;
width: 75px;
position: fixed;
top: 0;
left: 0;
background-color: #7b68ee;
overflow-x: hidden;
padding-top: 60px;
white-space: nowrap;
}
.sidebar 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;
}
main .sidebar {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
padding: 16px;
margin-left: 85px;
transition: margin-left 0.5s;
}
.sidebar-bottom {
position: absolute;
bottom: 0;
width: 100%;
margin-bottom: 4rem;
}
.fa,
.far,
.fas {
line-height: 50px !important;
}
.tooltip {
font-size: 10px;
background-color: rgba(0, 0, 0, .3);
position: absolute;
top: 0;
transform: translate(-50%, -50%);
left: 50%;
display: none;
padding: 2px 4px;
}
a:hover .tooltip {
display: block;
}

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<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>

Answer 2

删除 从 .sidebar 类overflow-x:hidden，在.sidebar a .tooltip { top:10px; left:70px;}中进行一些更改，并为#main { padding-left:75px; width:100%;}添加一些样式

CSS

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;
	 padding-top: 20px;
	 white-space: nowrap;
}
.sidebar a {
	 position: relative;
	 left: 17.5%;
	 text-decoration: none;
	 text-align: center;
	 font-size: 25px;
	 border-radius: 90px;
	 width: 20%;
	 color: #fff;
	 display: block;
	 margin-bottom: 10px;
	 height: 50px;
	 width: 50px;
}
.sidebar a:hover {
	 background: #fff 1a;
	 transition: 0.3s;
}
.sidebar a .fa, .sidebar a .far, .sidebar a .fas {
	 line-height: 50px;
}
.sidebar a .tooltip {
	 display: inline-block;
	 position: absolute;
	 background-color: black;
	 padding: 8px 15px;
	 border-radius: 3px;
	 top: 10px;
	 left: 70px;
	 opacity: 0;
	 visibility: hidden;
	 font-size: 13px;
	 letter-spacing: 0.5px;
}
.sidebar a .tooltip:before {
	 content: '';
	 display: block;
	 position: absolute;
	 left: -4px;
	 top: 10px;
	 transform: rotate(45deg);
	 width: 10px;
	 height: 10px;
	 background-color: inherit;
}
.sidebar a:hover {
	 background-color: green;
}
.sidebar a:hover .tooltip {
	 visibility: visible;
	 opacity: 1;
}
.sidebar a.active {
	 background-color: pink;
}
.sidebar a.active i {
	 color: purple;
}
.sidebar .sidebar-bottom {
	 position: absolute;
	 bottom: 0;
	 width: 100%;
	 margin-bottom: 0;
}
#main {
padding-left: 75px;
width:100%;
}

<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>