Hovering not working while displaying an element on hovering another button

Question

Intro

I am having a color palette. I wanted to display a tooltip whenever I hover that button. But when I hover over them , it is not.

I am using ReactJS and css for styling.

So this is the color palette and I want to display the tooltip whenver someone hovers any button.

Now I followed upto 2nd answer here. But it is not working.

Code

App.js

themeList.map((t, k) => (
      <button
        key={k}
        id="theme_color_btn"
        data-theme={t}
        onKeyDown={this.keyboardNavigation}
        className={`theme-button bg-${t}-500${theme === t ? " is-active" : ""}`}
        onClick={this.changeTheme}
      >
        <div
          id="tooltip"
          className={`bg-${t}-100 absolute text-${t}-900 text-sm p-1 rounded-md ring-1 ring-purple-900 z-10 mt-3 transition-transform capitalize `}
        >
          {t}
        </div>
      </button>

where const themeList = [ "indigo", "yellow", "red", "purple", "pink", "blue", "green", ]; index.css

#theme_color_btn{
  display:block;
}

#theme_color_btn:hover + #tooltip{
  display:block; 
  z-index:5;
  background-color:gray;
}

#tooltip {
  display:none ;
}

Instead,no tooltips are displaying on hover.

For Full code refer index.css and App.js files here

`+` is the adjacent _sibling_ combinator. But `#theme_color_btn` and `#tooltip` _are not_ siblings in the HTML structure you have shown. The tooltip is a _descendant_ of the button, so you want `#theme_color_btn:hover #tooltip` — CBroe, Jul 12 '22 at 13:52

score 0 · Answer 1 · answered Jul 12 '22 at 13:59

0

Just remove the plus

#theme_color_btn:hover #tooltip{
   display:block; 
   z-index:5;
   background-color:gray;
 }

Hope this works

answered Jul 12 '22 at 13:59

y051

184
5

I already got answer from first comment.Thank you ! – MagnusEffect Jul 12 '22 at 14:46

score 0 · Answer 2 · answered Jul 12 '22 at 14:00

0

You wrote #theme_color_btn:hover + #tooltip but the + operator is used for "the next element" but #tooltip is inside #theme_color_btn ...

So you should write something like

#theme_color_btn:hover #tooltip

or

#theme_color_btn:hover > #tooltip

Look here: Css selectors

answered Jul 12 '22 at 14:00

Gicu Aftene

502
2
9

I already got answer from first comment.Thank you ! – MagnusEffect Jul 12 '22 at 14:46

score 0 · Answer 3 · answered Jul 12 '22 at 14:13

0

Use this css structure. This will work for sure

#theme_color_btn:hover{
&#tooltip{
  display:block; 
  z-index:5;
  background-color:gray;
}
}

#tooltip {
  display:none ;
}

answered Jul 12 '22 at 14:13

perumal N

641
2
10
27

I already got answer from first comment.Thank you ! – MagnusEffect Jul 12 '22 at 14:46

Hovering not working while displaying an element on hovering another button

Intro

Code

3 Answers3