Question 255197 in Html Question posted in
Some basic documentation can be found here.

How to make a Right Arrow Tooltip text with html and css

I’m trying to make a navigation bar with UL LI elements, I want to use a tooltip when the mouse is over the LI element using hover. But it doesn’t seem to work, I tried to look through other examples, only that I have several containers and I think that’s the problem if you can help me.

So here is the html code in which I have a side-menu placed on the left inside, I have a side-bar-left menu and a side-bar-right menu on the left there will be an icon and on the right the channels. And I want to make the user touch with the mouse, hover the LI element to display a tooltip of example messages.

<nav class="side-menu">
    <div class="side-bar-left">
      <ul class="logo">
        <li>
          <a href="#">
            <img class="logo-image" src="/images/logo.png" alt="" />
          </a>
          <span class="tooltiptext">Messages</span>
        </li>
      </ul>

     <div class="side-bar-right">
     
     </div>
</nav>

And here are the styles, they almost work, only when the hover tooltiptext appears, it occupies the entire surface at LI, but that’s not what I need, I want it to be placed outside at li and on the right side

 .logo li {
      position: relative;
      /* Adăugați această proprietate pentru a face elementul <li> relativ pozitionat */
    }

    .logo li .tooltiptext {
      visibility: hidden;
      width: 120px;
      background-color: black;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px 0;
      position: absolute;
      z-index: 1;
      top: -40px;
      /* Plasați tooltip-ul deasupra elementului <li> */
      left: 50%;
      /* Plasați tooltip-ul în centrul elementului <li> */
      transform: translateX(-50%);
      opacity: 0;
      transition: opacity 0.3s, visibility 0s 0.3s;
      /* Am adăugat o întârziere pentru a face tooltip-ul să dispară mai încet */
    }

    .logo li:hover .tooltiptext {
      visibility: visible;
      opacity: 1;
      transition-delay: 0s;
      /* Anulăm întârzierea pentru a face tooltip-ul să apară imediat la hover */
    }

here is an example of how it should be
enter image description here

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0 
    <nav class="side-menu">
<div class="side-bar-left">
  <ul class="logo">
    <li>
      <a href="#">
        <img class="logo-image" src="/images/logo.png" alt="" />
      </a>
      <span class="tooltiptext">asdaasd</span>
    </li>
  </ul>
  <!--Header logo-->
  <div class="line"></div>
  <!--Chat menu -->
  <div class="middle-chat-menu">
    <ul>
      <li>
        <a href="#"><img class="first" src="/images/icons8-figma-144.png" alt="first" /></a>
      </li>
      <li>
        <a href="#"><img class="first" src="/images/icons8-figma-144.png" alt="first" /></a>
      </li>
      <li>
        <a href="#"><img class="first" src="/images/icons8-figma-144.png" alt="first" /></a>
      </li>
      <li>
        <a href="#"><img class="first" src="/images/icons8-figma-144.png" alt="first" /></a>
      </li>
      <li>
        <a href="#"><img class="first" src="/images/icons8-figma-144.png" alt="first" /></a>
      </li>
      <li>
        <a href="#"><img src="/images/logo.png" alt=""></a>
      </li>
      <li>
        <a href="#"><img src="/images/icons8-plus-100 (1).png" alt="" /></a>
      </li>
      <li>
        <a href="#"><img src="/images/icons8-plus-100 (1).png" alt="" /></a>
      </li>
    </ul>
  </div>
  <!--Bottom menu-->
  <div class="bottom-content">
    <ul>
      <div class="line"></div>
      <li>
        <a href="#"><img src="/images/icons8-plus-144 (1).png" alt="" /><span></span></a>
      </li>
      <li>
        <a href="#"><img src="/images/icons8-compass-100.png" alt="" /><span></span></a>
      </li>
      <li>
        <a href="#"><img src="/images/icons8-download-100.png" alt="" /><span></span></a>
      </li>
    </ul>
  </div>
</div>
<div class="side-bar-right"></div>

     .side-menu {
  width: 310px;
  height: 100vh;
  display: flex;
  background: var(--side-menu);
}

.side-bar-left {
  width: 23%;
  height: 100vh;
  background: var(--sidebar-left-menu);
}

.side-bar-left img {
  max-width: 30%;
  max-height: 30%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Stilul pentru pseudo-clasa ::before (linia de sub) */
.line {
  content: '';
  width: 43%;
  margin-left: auto;
  margin-right: auto;
  border-radius: 3px;
  height: 2px;
  /* Grosimea liniei */
  background-color: #000;
  margin-bottom: 8px;
  background: var(--sidebar-line);

}

.logo {
  margin-top: 12px;
}

.side-bar-right {
  width: 77%;
  height: 100vh;
  background: var(--sidebar-right-menu);
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

li {
  margin: auto;
  width: 48px;
  height: 48px;
  /* Aici modificăm înălțimea pentru a obține forma circulară */
  background: var(--icon);
  border-radius: 50%;
  text-align: center;
  line-height: 100px;
  margin-bottom: 8px;
  position: relative;
  overflow: hidden;
}

li a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: #fff;
  transition: background-color 0.3s ease;
}

ul :hover {
  border-radius: 19px;
}

.middle-chat-menu img {
  max-width: 30%;
  max-height: 30%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.middle-chat-menu a:hover,
.logo a:hover {
  background: var(--icon-MiddleChatMenu-Logo-hover);
}

.bottom-content img {
  max-width: 40%;
  max-height: 40%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.bottom-content a:hover {
  background: var(--icon-bottomContent-hover);
}

.bottom-content li:nth-child(2):hover img {
  content: url('/images/icons8-plus-100 (1).png');
}

.bottom-content li:nth-child(3):hover img {
  content: url('/images/icons8-compass-1002.png');
}

.bottom-content li:nth-child(4):hover img {
  content: url('/images/icons8-download-100 (2).png');
}

    this is how it looks the first li is not straight enter image description here


  2. 0

    You need to fix the style as

    .logo li {
  position: relative;
  display: inline-block;
  margin-right: 20px; 
}

.logo li .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.3s, visibility 0s 0.3s;
}

.logo li:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

    JsFiddle

    Edit: I put the entire html content

    <!DOCTYPE html>
<html lang="en">
<head>
    <style>


.logo li {
  position: relative;
  display: inline-block;
  margin-right: 20px; 
}

.logo li .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.3s, visibility 0s 0.3s;
}

.logo li:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

    </style>
</head>
<body>
  <nav class="side-menu">
    <div class="side-bar-left">
      <ul class="logo">
        <li>
          <a href="#">Hover Over me</a>
          <span class="tooltiptext">Messages</span>
        </li>
      </ul>

     <div class="side-bar-right">
  
     </div>
     </div>
</nav>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search