Infobulle minimaliste
Un composant d’info-bulle simple et minimaliste avec prise en charge du thème sombre et des effets réactifs, construit à l’aide de Tailwind CSS. Aucun JavaScript n’est utilisé, seulement HTML et CSS.
HTML Code
<div class="group relative inline-block">
<button class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Hover over me</button>
<div class="opacity-0 invisible group-hover:opacity-100 group-hover:visible absolute z-10 px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-700 dark:bg-gray-800 rounded-md shadow-sm">
Tooltip text
<svg class="absolute text-gray-700 dark:text-gray-800 h-2 w-full left-0 bottom-[-8px]" x="0px" y="0px" viewBox="0 0 25 25" xml:space="preserve"><polygon class="fill-current" points="0,0 12.5,25 25,0"/></svg>
</div>
</div>Composants associés
Composant d’info-bulle skeuomorphe
Un composant d’info-bulle complexe conçu avec un style skeuomorphe et des tons de terre, adapté aux applications de commerce électronique avec prise en charge du mode sombre.
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.
Composant d’info-bulle
Composant d’infobulle avec style Skeuomorphism, Schéma de couleurs complémentaires, Complexité simple, pour le commerce électronique.