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