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.
HTML Code
<div class="relative inline-block text-left">
<div>
<button type="button" class="inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-blue-500 dark:focus:ring-blue-300" aria-expanded="true" aria-haspopup="true">
Hover over me
</button>
</div>
<div class="absolute z-10 hidden group-hover:block bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-md shadow-lg transition-opacity duration-300 ease-in-out opacity-0 group-hover:opacity-100">
<div class="p-3">
<div class="flex items-center space-x-3">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full object-cover">
<div>
<p class="text-sm leading-5 font-medium text-gray-900 dark:text-gray-100">John Doe</p>
<p class="text-sm leading-5 text-gray-500 dark:text-gray-400">Senior Developer</p>
</div>
</div>
<div class="mt-2 text-gray-600 dark:text-gray-300">
<p class="text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin bibendum.</p>
</div>
<div class="mt-2 flex justify-end">
<button class="px-3 py-1 bg-blue-500 dark:bg-blue-300 text-white dark:text-gray-800 rounded-md hover:bg-blue-600 dark:hover:bg-blue-400 transform transition-transform duration-300 hover:scale-105">Action</button>
</div>
</div>
</div>
</div>
<style>
@media (prefers-reduced-motion: no-preference) {
.transition-opacity {
transition: opacity 0.5s ease-in-out;
}
}
</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 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.
Composant d’info-bulle
Un composant d’info-bulle réactif avec des couleurs vives, des micro-interactions et une prise en charge du mode sombre, adapté aux applications industrielles et manufacturières. Affiche des informations sur le survol/la mise au point.