Composant d’info-bulle
Un composant d’info-bulle minimaliste et plat pour les interfaces de jeu, avec du noir, du blanc et une couleur d’accentuation vive, avec des éléments interactifs complexes et une réactivité totale, y compris la prise en charge du mode sombre.
HTML Code
<div class="relative flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4 font-sans">
<div class="group relative inline-block">
<button class="px-6 py-3 bg-white text-gray-900 rounded-lg shadow-md hover:bg-gray-200 focus:outline-none focus:ring-4 focus:ring-indigo-500/50 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700 dark:focus:ring-indigo-400/50 transition-all duration-300 ease-in-out text-lg font-semibold uppercase tracking-wider">
Hover for Item Info
</button>
<div class="opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 ease-in-out absolute z-50 mt-2 left-1/2 -translate-x-1/2 w-80 lg:w-96 p-4 rounded-lg shadow-2xl bg-gradient-to-br from-gray-900 to-gray-800 border border-gray-700 dark:from-gray-700 dark:to-gray-600 dark:border-gray-500 transform scale-95 group-hover:scale-100 origin-top">
<div class="flex items-center space-x-4 mb-4 border-b border-gray-700 dark:border-gray-500 pb-3">
<img src="https://picsum.photos/80/80?random=1" alt="Item Icon" class="w-16 h-16 rounded-lg object-cover border-2 border-indigo-500 shadow-lg">
<div>
<h3 class="text-xl font-bold text-indigo-400 mb-1 leading-tight">Legendary Sword of Awesomeness</h3>
<p class="text-sm text-gray-300 dark:text-gray-200">One-Handed Sword</p>
</div>
</div>
<div class="space-y-3 mb-4 text-gray-200 dark:text-gray-100">
<p class="text-base leading-snug">A blade of untold power, forged in the heart of a dying star. Grants immense strength to its wielder.</p>
<ul class="list-none p-0 m-0 space-y-1">
<li class="flex items-center text-green-400 text-sm">
<svg class="w-4 h-4 mr-2 inline-block" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
+150 Attack Damage
</li>
<li class="flex items-center text-green-400 text-sm">
<svg class="w-4 h-4 mr-2 inline-block" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
+50 Critical Chance
</li>
<li class="flex items-center text-blue-400 text-sm">
<svg class="w-4 h-4 mr-2 inline-block" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v2.102a4 4 0 00.865 3.197 6 6 0 01-1.397 1.258l-5.717 5.717a1 1 0 00-.342.827l-.027.674a3 3 0 00.814 2.842 3 3 0 002.842.814l.674-.027a1 1 0 00.827-.342L15.953 13.1a1 1 0 000-1.414l-4.95-4.95a1 1 0 00-1.414 0l-.636.636a1 1 0 10-1.414 1.414l.115-.115L12 14.066V7.834a1 1 0 01.077-.426l.462-1.042A1 1 0 0113 5.485V2a1 1 0 01.3-.707A1 1 0 0114 1z" clip-rule="evenodd"></path></svg>
25% Chance for Double Strike
</li>
</ul>
</div>
<div class="flex justify-between items-center text-sm pt-3 border-t border-gray-700 dark:border-gray-500">
<div class="text-gray-400 dark:text-gray-300">Equip: Warrior, Paladin</div>
<div class="text-yellow-400 font-bold">Value: 5000 Gold</div>
</div>
<div class="absolute -top-3 left-1/2 -ml-2 w-0 h-0 border-l-[10px] border-l-transparent border-r-[10px] border-r-transparent border-b-[10px] border-b-gray-800 dark:border-b-gray-600"></div>
</div>
</div>
</div>Composants associés
Infobulle du tableau de bord skeuomorphe
Un composant d’info-bulle complexe et skeuomorphe pour un tableau de bord, doté d’un schéma de couleurs triadique et d’un design réactif avec prise en charge du mode sombre, construit avec Tailwind CSS et sans JavaScript.
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.
Memphis_Real_Estate_Tooltip
Un composant d’info-bulle simple et réactif pour les applications immobilières, doté d’une esthétique inspirée du design Memphis avec une base monochrome et une couleur d’accentuation vive. Inclut la prise en charge du mode sombre.