Paper_Rainbow_Tooltip_Component
Un composant d’info-bulle simple et réactif avec un design inspiré du papier/de l’impression et un arrière-plan dégradé arc-en-ciel, adapté aux plateformes de forum/communauté. Inclut la prise en charge du mode sombre.
HTML Code
<div class="flex min-h-screen items-center justify-center bg-gray-100 p-4 dark:bg-gray-900 font-sans">
<div class="relative group max-w-xs text-center">
<button class="relative z-10 p-3 rounded-lg shadow-md transition-all duration-300 ease-in-out
bg-gradient-to-r from-red-500 via-yellow-500 to-indigo-500
text-white font-semibold text-lg
hover:scale-105 focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-700
dark:from-red-700 dark:via-yellow-700 dark:to-indigo-700">
Hover for Info
</button>
<div class="absolute left-1/2 -translate-x-1/2 mt-3 p-4 pt-6
opacity-0 invisible group-hover:opacity-100 group-hover:visible
transition-all duration-300 ease-in-out transform group-hover:-translate-y-full
w-64 sm:w-72 md:w-80 lg:w-96
bg-white dark:bg-gray-800 rounded-lg shadow-xl outline outline-offset-4 outline-1 outline-gray-200 dark:outline-gray-700
before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:-ml-2 before:w-0 before:h-0
before:border-l-[8px] before:border-r-[8px] before:border-t-[8px]
before:border-l-transparent before:border-r-transparent before:border-t-white dark:before:border-t-gray-800
before:-translate-y-2 group-hover:before:-translate-y-1">
<p class="text-gray-800 dark:text-gray-200 text-sm leading-relaxed mb-1
font-serif italic tracking-wide group-hover:animate-fade-in">
"The only source of knowledge is experience."
</p>
<p class="text-gray-600 dark:text-gray-400 text-xs font-mono subpixel-antialiased">
- Albert Einstein
</p>
<!-- Tiny paper clip detail -->
<div class="absolute top-1 left-1/2 -translate-x-1/2 w-4 h-4 rounded-full
bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-600 dark:to-gray-700
shadow-inner blur-[0.5px]
border border-gray-400 dark:border-gray-500"></div>
</div>
</div>
</div>
<!-- To make the 'fade-in' work (optional, but good for subtle animation) -->
<style>
@keyframes fade-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.group-hover\:animate-fade-in {
animation: fade-in 0.3s ease-out forwards;
animation-delay: 0.1s; /* Slight delay after tooltip is visible */
}
</style>Composants associés
Composant d’info-bulle
Un composant d’info-bulle complexe, réactif, pris en charge par un thème sombre, pour les tableaux de bord utilisant Tailwind CSS. Pas besoin de JavaScript, seulement du HTML avec des classes Tailwind. Pour le mode sombre, utilisez le préfixe dark : de Tailwind pour le coiffage. Les images proviennent de picsum.photos et randomuser.me.
Composant d’infobulle - Art déco Niveaux de gris
Un composant d’info-bulle complexe inspiré de l’Art déco pour la documentation et les sites wiki, avec une palette de couleurs en niveaux de gris, des motifs géométriques et un contenu riche. Entièrement réactif avec prise en charge du mode sombre.
Monospace_Developer_Tooltip_Component_Healthcare
Un composant d’info-bulle simple, inspiré du monospace, avec des tons chauds de coucher de soleil, conçu pour les applications de santé. Dispose d’un design réactif et d’une prise en charge du mode sombre.