Home > database >  Why is my tooltip not showing up on link hover?
Why is my tooltip not showing up on link hover?

Time：03-14

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/

CodePudding user response：

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/[email protected]/css/boxicons.min.css' rel='stylesheet'>
  </head>
  <body>
    <div >
        
      <div >
          <div >
            <i class='bx bx-moon'></i>
            <span >DRamirez</span>
          </div>
          <i  id="btn"></i>
      </div>
          <ul >
              <li><a href="#">
                  <i class='bx bx-home'></i>
                  <span >Home</span>
                  <span >Home</span></a>
              </li>
              <li><a href="#">
                  <i class='bx bx-paperclip'></i>
                  <span >Resume</span>
                  <span >Resume</span></a>
              </li>

              <li>
                  <div  >
                      <a href="#">
                      <i class='bx bxl-javascript' ></i>
                      <span >JS Games</span>
                      <span >JS Games</span></a>
                      <!--i class='bx bxs-chevron-down' ></i-->
                  </div>
              </li>

              <li><a href="#">
                  <i class='bx bxl-java' ></i>
                  <span >Java Swing GUIs</span>
                  <span >Java Swing</span></a>
              </li>
              <li><a href="#">
                  <i class='bx bx-transfer'></i>
                  <span >API Integration</span>
                  <span >API Integration</span></a>
              </li>
              <li><a href="#">
                  <i class='bx bx-data' ></i>
                  <span >Data Visualization</span>
                  <span >Data Visualization</span></a>
              </li>
              <li><a href="#">
                  <i class='bx bx-landscape'></i>
                  <span >Graphic Design</span>
                  <span >Graphic Design</span></a>
              </li>
              <li><a href="#">
                  <i class='bx bx-mail-send'></i>
                  <span >Contact</span>
                  <span >Contact</span></a>
              </li>
            </ul>

            <div >
              <div >
                <div >
                  <img src="images/small-mugshot.jpg" alt="profileImage">
                  <div >
                    <div >Diana Ramirez</div>
                    <div >Software Engineer</div>
                  </div>
                </div>
              </div>  
            </div>
        
            <!--section >
              <div >
                <i ></i>
                <span >Drop Down Sidebar</span>
              </div>
            </section-->
      <!--div >
          <i ></i>
      </div>
          
      <div >
          <a href="#"><i ></i></a>
          <a href="#"><i ></i></a>
          <a href="#"><i ></i></a>
      </div>
          
      <div >
          <i ></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 >
    
    <header>
        <div >
          <h1>Web Portfolio</h1>
          <h2>web portfolio test</h2>
          <h3>web portfolio test</h3>
        </div>
    </header>
   </div>
    
   <footer>
    <div >
      <p id="footnote">Content copyright 2022</p>
     </div>
   </footer-->
   <script src="js/script.js"></script>
</body>
</html>

Page link：https//www.codepudding.com/database/333870.html

Prev:JAVASCRIPT , HTML enabling input field based on radio button choice
Next:How to change placeholder position by margin padding in Tailwind CSS?
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding