RetroTooltip
Un composant d’info-bulle simple et réactif avec un style rétro/vintage et une palette de couleurs en niveaux de gris, adapté aux sites Web d’entreprise. Prend en charge le thème sombre.
HTML Code
<div class="relative inline-block">
<button class="text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700 px-3 py-1 rounded-md font-mono">Hover Me</button>
<div class="invisible absolute z-10 top-full left-1/2 transform -translate-x-1/2 mt-2 w-48 p-2 bg-gray-800 dark:bg-gray-200 text-gray-200 dark:text-gray-800 text-sm rounded shadow-lg opacity-0 transition-all duration-300 group-hover:visible group-hover:opacity-100">
<p class="font-mono">This is a retro-style tooltip!</p>
</div>
</div>Composants associés
Composant d’info-bulle
Un composant d’info-bulle neumorphe avec une palette de couleurs complémentaire, une complexité modérée et une conception réactive avec prise en charge du thème sombre, adapté à un blog ou à la consommation de contenu.
Composant d’info-bulle neumorphe
Un composant d’info-bulle sophistiqué de style Neumorphisme adapté aux sites Web d’entreprise, utilisant des couleurs vives et conçu pour la prise en charge du mode sombre.
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.