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
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.
Infobulle de commerce électronique pastel minimaliste
Composant d’info-bulle pastel minimaliste pour le commerce électronique, avec un design réactif et une prise en charge du mode sombre.
Infobulle du tableau de bord skeuomorphe
Un composant d’info-bulle complexe et skeuomorphe pour un tableau de bord, doté d’un schéma de couleurs triadique et d’un design réactif avec prise en charge du mode sombre, construit avec Tailwind CSS et sans JavaScript.