Why is my tooltip not showing up on link hover? - html

Question

I have been trying for a few days to get my tooltips to show up without any progress. They can appear in the sidebar with this block selector .sidebar ul li .tooltip {} when opacity is 1, if you want to see what they should look like.
I tried adding z-index to the .sidebar ul li a:hover .tooltip {} selector, along with opacity:1, but that doesn't work.
I also tried changing the 'hover' to apply to the 'li' instead of the 'a' tag but that doesn't change anything. and also tried adding it to both (.sidebar ul li:hover a:hover .tooltip {}) but doesn't work either.
Is this a problem with opacities, or with selectors? I feel like I've tried everything.
When I select the tooltip element in the browser dev tools and force into hover state, you can see the tooltip is there in the right spot, but just behind everything or invisible.
Any help would be appreciated thank you.
.sidebar ul li a:hover {
background-color: #ae85f1;
}
.sidebar ul li a:hover .tooltip {
transition: all 0.5s ease;
top: 50%;
opacity: 1;
display: block;
z-index:500;
}
.sidebar ul li .tooltip {
position: absolute;
color: #343434;
left: 130px;
top: 0;
transform: translate(-50%, -50%);
border-radius: 6px;
height: 35px;
width: 122px;
background: #fff;
line-height: 35px;
text-align: center;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
transition: 0s;
pointer-events: none;
opacity: 1;
}
.sidebar.active ul li .tooltip {
display: none;
}
https://jsfiddle.net/ramid320/ho148uyx/11/

Answer 1

There are few issues in CSS, You need to update below changes in your code.
Change 1:
Remove overflow: hidden; from ul CSS on line No: 32
ul {
list-style-type: none;
margin: 0;
padding: 0;
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
Change 2:
Add display: none; on sidebar ul li a .tooltip CSS on line No: 123
.sidebar ul li a .tooltip {
position: absolute;
color: #343434;
display: none;
left: 130px;
top: 0;
transform: translate(-50%, -50%);
border-radius: 6px;
height: 35px;
width: 122px;
background: #fff;
line-height: 35px;
text-align: center;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
transition: 0s;
pointer-events: none;
}
Change 3:
Add !important on sidebar.active ul li .tooltip CSS on line No: 141
.sidebar.active ul li .tooltip {
display: none !important;
}
All changes also updated on below code snippet, I hope it'll help you out. Thank You
let btn = document.querySelector("#btn");
let sidebar = document.querySelector(".sidebar");
btn.onclick= function(){
sidebar.classList.toggle("active");
}
#import url('https://fonts.googleapis.com/css2?family=Cabin&family=Poppins:wght#300;400;500;600;700&display=swap');
/*font-family: 'Poppins', sans-serif;
//font-family: 'Cabin', sans-serif;*/
--root {
--dark1: #1c1c1c;
--dark2: #daddd8;
--dark3: #ecebe4;
--dark4: #eef0f2;
--dark5: #fafaff;
--og1: #eee2ff;
--og2: #faeaff;
--og3: rgba(228, 53, 145, 0.7);
--og4: #ffd5d5;
}
*{
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
position: relative;
min-height: 100vh;
width: 100%;
overflow: hidden;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
li {
float: left;
width: 25%;
}
li a {
display: block;
text-align: center;
padding: 8px 0px;
text-decoration: none;
color: #e4d9ff;
}
/*--------------------------------------------------------------sidebar styles */
.sidebar {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 78px;
background: #1c1c1c;
color: #e4d9ff;
padding: 6px 14px;
transition: all 0.5s ease;
z-index: 10;
}
.sidebar.active {
width: 240px;
}
.sidebar .logo_details .logo {
height: 50px;
width: 60%;
display: flex;
align-items: center;
color: #fafaff;
opacity: 0;
pointer-events: none;
}
.sidebar.active .logo_details .logo {
opacity: 1;
pointer-events: none;
}
.logo_details .logo_name {
font-size: 18px;
color: #e4d9ff;
font-weight: 400;
}
.sidebar #btn {
color: #fff;
position: absolute;
left: 50%;
top: 6px;
font-size: 18px;
height: 50px;
width: 50px;
text-align: center;
line-height: 50px;
transform: translateX(-50%);
}
.sidebar.active #btn {
left: 85%;
}
.sidebar ul{
margin-top: 20px;
}
.sidebar ul li{
position: relative;
list-style: none;
height: 56px;
width: 100%;
line-height: 30px;
}
.sidebar ul li a .tooltip {
position: absolute;
color: #343434;
display: none;
left: 130px;
top: 0;
transform: translate(-50%, -50%);
border-radius: 6px;
height: 35px;
width: 122px;
background: #fff;
line-height: 35px;
text-align: center;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
transition: 0s;
pointer-events: none;
}
.sidebar.active ul li .tooltip {
display: none !important;
}
.sidebar ul li a {
color: #fff;
display: flex;
align-items: center;
text-decoration: none;
border-radius: 12px;
transition: all 0.4s ease;
white-space: nowrap;
}
.sidebar ul li i{
height: 40px;
min-width: 50px;
border-radius: 12px;
line-height: 40px;
text-align: center;
}
.sidebar ul li a:hover {
background-color: #ae85f1;
}
.sidebar ul li:hover .tooltip {
transition: all 0.5s ease;
top: 50%;
display: block;
z-index: 500;
}
.sidebar .link_name{
opacity: 0;
pointer-events: none;
}
.sidebar.active .link_name{
opacity: 1;
pointer-events: auto;
}
.sidebar .profile_content {
position: absolute;
color: #fff;
bottom: 0;
left: 0;
width: 100%;
}
.logo_details .logo i {
font-size: 28px;
margin-right: 5px;
left: 50%;
}
.sidebar .profile_content .profile{
position: relative;
padding: 10px 6px;
height: 60px;
}
.profile_content .profile .profile_details{
display: flex;
align-items: center;
}
.profile .profile_details img{
height: 45px;
width: 45px;
object-fit: cover;
border-radius: 12px;
}
.profile .profile_details .name_job {
margin-left: 10px;
}
.profile .profile_details .name{
font-size: 15px;
font-weight: 400;
}
.profile .profile_details .job{
font-size: 12px;
}
/* --------------------------------------------------page styles */
.container {
margin: 0 auto;
padding: 60px 100px;
position: absolute;
background-color: green;
}
.headerBox h1 {
display: block;
padding-left: -20px;
position: relative;
font: 60px 'Lobster', cursive;
letter-spacing: 0px;
color: #e5383b; /*red web portfolio text*/
}
.headerBox {
height: 300px;
background-color: white;
padding-left: 200px;
}
#footnote {
font-size: 10px;
text-align: center;
color: #343434;
}
/* media queries */
#media screen and (max-width: 539px) {
.container {
padding: 0px 25px;
margin: 0px;
}
}
#media screen and (min-width: 540px) and (max-width: 699px) {
.headerBox h1 {
font: 80px 'Lobster', cursive;
height: 60px;
}
h1:after {
position: absolute; left: 3px; top: 3px;
}
.container {
padding: 0px 30px;
margin: 0px;
}
.headerBox h2 {
font-size: 20px;
display: block;
line-height: 20px;
margin-bottom: 16px;
}
}
#media screen and (min-width: 700px) and (max-width: 875px) {
.headerBox h1 {
font: 100px 'Lobster', cursive;
height: 100px;
}
.container {
padding: 0px 50px;
margin: 0px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Personal Portfolio</title>
<!--fonts
font-family: 'Montserrat', sans-serif;
font-family: 'Roboto Mono', sans-serif;
font-family: 'Lobster', cursive;
font-family: 'Comfortaa', cursive;
-->.
<link href="https://fonts.googleapis.com/css?family==Lobster" rel="stylesheet">
<!--page css-->
<link rel="stylesheet" type="text/css" href="css/styles.css">
<!-- the below three lines are a fix to get HTML5 semantic elements working in old versions of Internet Explorer-->
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
<link href='https://unpkg.com/boxicons#2.1.1/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<div class="sidebar">
<div class="logo_details">
<div class="logo">
<i class='bx bx-moon'></i>
<span class="logo_name">DRamirez</span>
</div>
<i class="bx bx-menu" id="btn"></i>
</div>
<ul class="nav_links">
<li><a href="#">
<i class='bx bx-home'></i>
<span class="link_name">Home</span>
<span class="tooltip">Home</span></a>
</li>
<li><a href="#">
<i class='bx bx-paperclip'></i>
<span class="link_name">Resume</span>
<span class="tooltip">Resume</span></a>
</li>
<li>
<div class="icon_link" >
<a href="#">
<i class='bx bxl-javascript' ></i>
<span class="link_name">JS Games</span>
<span class="tooltip">JS Games</span></a>
<!--i class='bx bxs-chevron-down' ></i-->
</div>
</li>
<li><a href="#">
<i class='bx bxl-java' ></i>
<span class="link_name">Java Swing GUIs</span>
<span class="tooltip">Java Swing</span></a>
</li>
<li><a href="#">
<i class='bx bx-transfer'></i>
<span class="link_name">API Integration</span>
<span class="tooltip">API Integration</span></a>
</li>
<li><a href="#">
<i class='bx bx-data' ></i>
<span class="link_name">Data Visualization</span>
<span class="tooltip">Data Visualization</span></a>
</li>
<li><a href="#">
<i class='bx bx-landscape'></i>
<span class="link_name">Graphic Design</span>
<span class="tooltip">Graphic Design</span></a>
</li>
<li><a href="#">
<i class='bx bx-mail-send'></i>
<span class="link_name">Contact</span>
<span class="tooltip">Contact</span></a>
</li>
</ul>
<div class="profile_content">
<div class="profile">
<div class="profile_details">
<img src="images/small-mugshot.jpg" alt="profileImage">
<div class="name_job">
<div class="name">Diana Ramirez</div>
<div class="job">Software Engineer</div>
</div>
</div>
</div>
</div>
<!--section class="home-section">
<div class="home-content">
<i class="bx bx-menu"></i>
<span class="text">Drop Down Sidebar</span>
</div>
</section-->
<!--div class="cancel_btn">
<i class="fas fa-times"></i>
</div>
<div class="media_icons">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
<div class="menu_btn">
<i class="fas fa-bars"></i>
</div-->
</div>
testingtestingtestingtestingtestingtesting
testingtesting
testingtesting
testingtesting
testingtesting
testingtestingtestingtesting
testingtestingtestingtesting
testingtesting
testingtestingtestingtesting
testingtesting
testingtesting
testingtesting
testingtesting
testingtesting
testingtesting
testingtestingtestingtesting
testingtesting
testingtesting
testingtesting
testingtesting
testingtesting
testingtesting
testingtesting
testingtesting
testingtesting
testingtesting
testingtesting
testingtesting
testingtesting
testingtesting
testingtesting
testingtesting
testingtesting
testingtesting
<!--div class="container">
<header>
<div class="headerBox">
<h1>Web Portfolio</h1>
<h2>web portfolio test</h2>
<h3>web portfolio test</h3>
</div>
</header>
</div>
<footer>
<div class="footer-text">
<p id="footnote">Content copyright 2022</p>
</div>
</footer-->
<script src="js/script.js"></script>
</body>
</html>