Composant d’info-bulle Micro-interactions
Un composant d’info-bulle simple mais attrayant avec des animations de micro-interaction subtiles, un design réactif et une prise en charge du thème sombre construit avec Tailwind CSS. Aucun JavaScript n’est requis.
HTML Code
<div class="flex justify-center items-center h-screen bg-gray-100 dark:bg-gray-900">
<div class="relative group">
<button class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors duration-200">Hover Me</button>
<div class="absolute bottom-full mb-2 left-1/2 transform -translate-x-1/2 px-3 py-2 bg-gray-800 text-white text-sm rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300">
Hello! I'm a Tooltip
</div>
</div>
</div>
Composants associés
Composant d’info-bulle de conception matérielle - Réservation/Réservation
Un composant d’infobulle complexe et réactif inspiré de Material Design pour les systèmes de réservation, avec des couleurs sourdes/désaturées, des effets de profondeur et la prise en charge du mode sombre. Il fournit des informations détaillées lors du survol/mise au point.
Infobulle du Glassmorphism
Un composant d’info-bulle conçu avec le style glassmorphism, prenant en charge le thème sombre et le design réactif, adapté aux interfaces de médias sociaux.
3D_Real_Estate_Tooltip
Il s’agit d’un composant d’info-bulle modérément complexe et réactif avec des éléments de conception 3D et une palette de couleurs chaudes de coucher de soleil, adapté aux annonces immobilières. Inclut la prise en charge du mode sombre.