Avatar of Peter Nordberg
Peter NordbergFlag for Sweden asked on

Show tooltip for hovered item with JQuery

Have this simple nav. I want to show a toootip on hover for the selected nav.

<ul class="nav">
        <li class="nav__item">
          <a class="nav__link nav__link--active" href="#">             <div class="nav__icon">               <i class="fa fa-home"></i>             </div>             <div class="nav__tooltip">               Hem             </div>           </a>         </li>         <li class="nav__item">           <a class="nav__link" href="#">            <div class="nav__icon">               <i class="fa fa-calendar-alt"></i>             </div>             <div class="nav__tooltip">               Events             </div>           </a>         </li>       </ul>

Open in new window

I've started like this in JQuery:

 $(".nav__link").hover(
          function () {
            $(".nav__tooltip").show();           },           function () {             $(".nav__tooltip").hide();           }           );

Open in new window

But this of course shows all tooltips for the nav with the class .nav-link. How can I limit it to show only the currently hovered item.



Thanks for help!

Peter

jQueryCSS

Avatar of undefined
Last Comment
Julian Hansen

8/22/2022 - Mon
Julian Hansen

Why are you using jQuery for this? You can do this with CSS and the :hover attribute in combination with the adjacent sibling selector (+)

.nav__tooltip {
   display: none;
}

.nav__link:hover + .nav__tooltip {
   display: inline-block; /* or whatever style you need here */
}

Open in new window

ASKER
Peter Nordberg

Hm,

tried that but didn't get it to work. Tooltip doesn't show.

.LeftNav {
  grid-column: 1 / 1;
  background-color: #2a2f4d;
  box-shadow: 4px 0px 2px 0px rgba(0, 0, 0, 0.9); }
  .LeftNav .nav {
    width: 100%;
    padding: 0;
    margin: 0; }
    .LeftNav .nav__item {
      font-size: 1.4rem;
      padding: 1rem 0;
      text-align: center;
      width: 100%; }
      .LeftNav .nav__item:first-child {
        padding-top: 2rem; }
    .LeftNav .nav__link {
      color: #abb4be;
      position: relative; }
      .LeftNav .nav__link:hover {
        color: #fff; }
      .LeftNav .nav__link:hover + .nav__tooltip {
        display: block; }
      .LeftNav .nav__link--active {
        color: #fff !important; }
    .LeftNav .nav__icon .fa {
      width: 4rem;
      font-size: 2.5rem !important;
      vertical-align: middle;
      top: -3px; }
    .LeftNav .nav__tooltip {
      position: absolute;
      top: 0;
      left: 3rem;
      background-color: #3f3e3e;
      color: #fff;
      padding: .5rem 2rem;
      z-index: 10;
      border-radius: 3px;
      box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.6);
      display: none; }



Open in new window

ASKER CERTIFIED SOLUTION
leakim971

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Julian Hansen

You really don't need JavaScript for this.

Please post the HTML that goes with the CSS you have posted.
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
ASKER
Peter Nordberg

  <div class="LeftNav">
      <ul class="nav">
        <li class="nav__item">
          <a class="nav__link nav__link--active" href="#">
            <div class="nav__icon">
              <i class="fa fa-th"></i>
            </div>
            <div class="nav__tooltip">
              Dashboard
            </div>
          </a>
        </li>
        <li class="nav__item">
          <a class="nav__link" href="#">            <div class="nav__icon">
              <i class="fa fa-calendar-alt"></i>
            </div>
            <div class="nav__tooltip">
              Events
            </div>
          </a>
        </li>
      </ul>
    </div>


SOLUTION
Log in to continue reading
Log In
Sign up - Free for 7 days
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.