Sidebar tooltip not showing on anchor hover - html

Question

I am currently trying to implement a tooltip feature when a user hovers over a sidebar navigation item. It is currently being rendered in the DOM but I can not get it to display no matter what I change in the styles. I have attempted adding a z-index, changing the display and position attributes but to no success. Any CSS experts out there know what would be causing this? Link to the codepen here.
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

I made adjustments to your code in order to make it work. On :hover, the span which has a default display: none, will be displayed via display: block. You were referring to the anchor direclty, but you should consider the span that's inside the anchor (a) element.
.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;
}
See this snippet for the solution to your problem.
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

Remove
overflow-x:hidden from .sidebar class and make some changes in .sidebar a .tooltip { top:10px; left:70px;} and add some style for #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>