Infobulle minimaliste
Un composant d’info-bulle de conception minimaliste et plat pour les sites Web de blog/contenu, avec une palette de couleurs monochromatiques et une mise en page simple. Il est réactif et prend en charge le mode sombre à l’aide de Tailwind CSS.
HTML Code
<div class="relative flex items-center group">
<button class="text-gray-600 dark:text-gray-300 px-4 py-2 rounded-md border border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500">Hover Me</button>
<div class="absolute bottom-full mb-2 hidden group-hover:block w-48 p-2 text-sm text-white bg-gray-800 dark:bg-gray-200 rounded-md shadow-lg">
<span class="text-gray-200 dark:text-gray-800">This is a minimalist tooltip.</span>
<svg class="absolute top-full left-1/2 transform -translate-x-1/2 w-3 h-3 text-gray-800 dark:text-gray-200 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 255 255"><polygon points="0,0 127.5,127.5 255,0"/></svg>
</div>
</div>Composants associés
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.
Composant d’info-bulle
Un composant d’info-bulle de conception de matériaux réactif avec une palette de couleurs monochromatiques pour le commerce électronique, avec prise en charge du mode sombre. Pas de JavaScript, HTML et Tailwind CSS uniquement.
Infobulle monochromatique brutaliste
Un composant d’info-bulle monochromatique complexe, de style brutaliste, conçu pour les sites de blog/de contenu, avec plusieurs éléments interactifs et une réactivité totale avec prise en charge du mode sombre.