HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 p-10">
<div class="relative flex items-center group">
<button class="px-6 py-3 bg-gray-200 dark:bg-gray-700 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark text-gray-800 dark:text-gray-200 font-semibold focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75 transition-all duration-300">
Hover Me
</button>
<div class="absolute bottom-full mb-3 hidden group-hover:block px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark text-gray-700 dark:text-gray-300 text-sm opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all duration-300">
This is a neumorphic tooltip!
<div class="absolute left-1/2 transform -translate-x-1/2 top-full w-0 h-0 border-t-8 border-t-gray-200 dark:border-t-gray-700 border-x-8 border-x-transparent"></div>
</div>
</div>
</div>
Composants associés
Composant d’info-bulle skeuomorphe
Un composant d’infobulle réactif conçu avec un skeuomorphisme et des couleurs vives, adapté aux blogs et à la consommation de contenu. Il inclut la prise en charge des thèmes sombres à l’aide de Tailwind CSS.
Composant d’info-bulle
Un composant d’info-bulle minimaliste et plat pour les interfaces de jeu, avec du noir, du blanc et une couleur d’accentuation vive, avec des éléments interactifs complexes et une réactivité totale, y compris la prise en charge du mode sombre.
Infobulle monochromatique brutaliste
Un composant d’info-bulle monochromatique complexe, de style brutaliste, conçu pour les sites de blog/de contenu, avec plusieurs éléments interactifs et une réactivité totale avec prise en charge du mode sombre.