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
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.
Composant d’info-bulle
Un composant d’info-bulle réactif conçu avec des micro-interactions, une palette de couleurs triadique et prend en charge le mode sombre pour les sites Web professionnels. Il comprend des animations attrayantes, une interface riche avec des éléments interactifs et utilise Tailwind CSS pour le style.
Composant d’infobulle rétro
Un composant d’infobulle à thème rétro/vintage avec des effets réactifs et la prise en charge du mode sombre.