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.
HTML Code
<div class="relative inline-block">
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded shadow-lg hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800">
Hover me
</button>
<div class="absolute left-1/2 transform -translate-x-1/2 mt-2 w-48 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-xl opacity-0 transition-opacity duration-300 tooltip">
<div class="flex items-center p-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
<span class="text-sm font-semibold text-gray-800 dark:text-gray-300">John Doe</span>
</div>
<div class="p-2">
<p class="text-xs text-gray-600 dark:text-gray-400">
This is a tooltip message. It provides additional information about the button.
</p>
</div>
</div>
</div>
<style>
/* Tooltip visibility on hover */
.relative:hover .tooltip {
opacity: 1;
}
/* Skeuomorphic style - shadow and border */
.tooltip {
box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.2);
border-radius: 0.5rem;
}
</style>
Composants associés
Glassmorphism Monochromatique Simple Infobulle
Un composant d’info-bulle simple, réactif et compatible avec le mode sombre avec un style Glassmorphism, un schéma de couleurs monochromatiques pour les blogs et les sites de contenu.
Composant d’info-bulle neumorphe
Un composant d’info-bulle sophistiqué de style Neumorphisme adapté aux sites Web d’entreprise, utilisant des couleurs vives et conçu pour la prise en charge du mode sombre.
Bauhaus_Autumn_Tooltip_Component
Un composant d’infobulle inspiré du Bauhaus avec une palette de couleurs d’automne, conçu pour les marques de mode et de beauté. Dispose d’un design géométrique fonctionnel, d’une réactivité et d’une prise en charge du mode sombre.