Composant d’info-bulle
Un composant d’info-bulle réactif simple conçu pour la consommation de contenu de blog, avec une conception 3D avec une palette de couleurs en niveaux de gris et la prise en charge du mode sombre à l’aide de Tailwind CSS.
HTML Code
<div class="relative group">
<!-- Tooltip Trigger -->
<button class="bg-gray-800 text-white p-2 rounded">Hover me!</button>
<!-- Tooltip -->
<div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-48 bg-white text-black text-sm rounded shadow-lg transition-opacity duration-300 opacity-0 group-hover:opacity-100 dark:bg-gray-700 dark:text-white">
<div class="p-2">
<p>This is a tooltip with 3D styling!</p>
</div>
<div class="absolute left-1/2 top-full transform -translate-x-1/2 w-0 h-0 border-x-8 border-x-transparent border-t-8 border-t-white dark:border-t-gray-700"></div>
</div>
</div>
Composants associés
Infobulle
Composant d’info-bulle avec conception 3D, tons de terre, complexité simple et objectif du tableau de bord. Réactif avec prise en charge du thème sombre.
Infobulle pastel minimaliste
Un composant d’info-bulle minimal et plat conçu pour les sites Web d’entreprise et d’entreprise avec des couleurs pastel, un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS.
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.