Introducción

Estoy teniendo una paleta de colores. Quería mostrar una información sobre herramientas cada vez que presiono ese botón. Pero cuando paso el cursor sobre ellos, no lo es.

Estoy usando ReactJS y css para diseñar.

Así que esta es la paleta de colores y quiero mostrar la información sobre herramientas cada vez que alguien pase el cursor sobre cualquier botón.

Ahora seguí hasta la segunda respuesta aquí . Pero no está funcionando.

Código

Aplicación.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", ]; índice.css

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

En cambio, no se muestra información sobre herramientas al pasar el mouse.

Para obtener el código completo, consulte los archivos index.css y App.js aquí