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

CodePudding user response：

Just remove the plus

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

Hope this works

CodePudding user response：

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

CodePudding user response：

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 ;
}