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
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 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.
Monospace_Developer_Tooltip_Component_Healthcare
Un composant d’info-bulle simple, inspiré du monospace, avec des tons chauds de coucher de soleil, conçu pour les applications de santé. Dispose d’un design réactif et d’une prise en charge du mode sombre.