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