Composant d’info-bulle
Un composant d’info-bulle réactif avec des micro-interactions pour l’engagement de l’utilisateur, avec un thème sombre et des animations attrayantes.
HTML Code
<div class="relative group">
<button class="bg-blue-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-300">
Hover me
</button>
<div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-48 opacity-0 transition-opacity duration-300 ease-in-out group-hover:opacity-100">
<div class="bg-gray-800 text-white p-2 rounded shadow-lg border border-gray-700">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2" />
<span class="font-semibold">John Doe</span>
</div>
<div>
<p class="mt-1 text-sm">This is a tooltip message that provides additional information.</p>
</div>
<img src="https://picsum.photos/200/100" alt="Placeholder" class="mt-2 rounded" />
</div>
</div>
</div>
<!-- Dark mode support -->
<style>
@media (prefers-color-scheme: dark) {
.bg-gray-800 {
background-color: #1f2937;
}
.border-gray-700 {
border-color: #374151;
}
}
</style>Composants associés
Memphis_Real_Estate_Tooltip
Un composant d’info-bulle simple et réactif pour les applications immobilières, doté d’une esthétique inspirée du design Memphis avec une base monochrome et une couleur d’accentuation vive. Inclut la prise en charge du mode sombre.
Composant d’info-bulle
Un composant d’infobulle réactif sur le thème de l’obscurité, faisant partie d’un schéma de couleurs triadique, adapté à un portfolio. Construit avec Tailwind CSS pour une esthétique simple et minimale.
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.