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.
HTML Code
<div class="relative flex items-center justify-center p-4 min-h-screen bg-gray-50 dark:bg-gray-900 overflow-hidden">
<!-- Outer decorative elements for Memphis style -->
<div class="absolute top-10 left-10 w-20 h-20 bg-blue-500 transform rotate-45 hidden md:block"></div>
<div class="absolute bottom-10 right-10 w-24 h-24 bg-red-500 rounded-full hidden md:block"></div>
<div class="absolute top-1/4 right-1/4 w-16 h-16 bg-gradient-to-br from-yellow-300 to-orange-400 rotate-12 transform hidden md:block"></div>
<div class="group relative z-10 p-2">
<button class="px-6 py-3 bg-gray-800 text-white font-bold uppercase tracking-wider rounded-lg shadow-md transition-transform duration-200 ease-in-out hover:scale-105 active:scale-95
dark:bg-gray-100 dark:text-gray-900 dark:border-2 dark:border-blue-500
focus:outline-none focus:ring-4 focus:ring-blue-500 focus:ring-opacity-75">
Property Details
</button>
<!-- Tooltip content -->
<div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-72 md:w-80 p-4
bg-gray-900 border-4 border-blue-500 text-white rounded-lg shadow-lg
opacity-0 invisible group-hover:opacity-100 group-hover:visible
transform translate-y-2 group-hover:translate-y-0
transition-all duration-300 ease-in-out origin-bottom
dark:bg-gray-100 dark:border-blue-500 dark:text-gray-900
relative md:static md:w-auto md:max-w-2xl lg:max-w-3xl lg:w-96
before:content-[''] before:absolute before:left-1/2 before:top-full before:-translate-x-1/2 before:border-8 before:border-t-gray-900 before:border-x-transparent before:border-b-transparent
dark:before:border-t-gray-100">
<div class="relative flex flex-col gap-3">
<h3 class="text-xl font-extrabold text-blue-500 dark:text-blue-600 uppercase tracking-wide">Luxury Villa</h3>
<p class="text-sm text-gray-200 dark:text-gray-700">Spacious 4-bedroom villa with ocean views.</p>
<div class="flex items-center gap-2 text-sm text-gray-300 dark:text-gray-600">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.05 4.05a7 7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd" />
</svg>
<span>123 Ocean Dr, Miami</span>
</div>
<ul class="grid grid-cols-2 gap-2 text-sm">
<li class="flex items-center gap-2"><span class="w-2 h-2 bg-blue-500 rounded-full"></span><span class="font-medium">Beds:</span> 4</li>
<li class="flex items-center gap-2"><span class="w-2 h-2 bg-blue-500 rounded-full"></span><span class="font-medium">Baths:</span> 3.5</li>
<li class="flex items-center gap-2"><span class="w-2 h-2 bg-blue-500 rounded-full"></span><span class="font-medium">Area:</span> 3200 sqft</li>
<li class="flex items-center gap-2"><span class="w-2 h-2 bg-blue-500 rounded-full"></span><span class="font-medium">Price:</span> $1.2M</li>
</ul>
<a href="#" class="mt-3 block text-center px-4 py-2 bg-blue-500 text-white font-semibold rounded-md hover:bg-blue-600 transition-colors duration-200 dark:bg-blue-600 dark:hover:bg-blue-700">
View Listing
</a>
</div>
<!-- Triangle pointer (mimicking Memphis sharp angles) -->
<div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-[calc(100%+0px)] transform rotate-45 w-6 h-6 bg-blue-500 group-hover:opacity-0 group-hover:invisible transition-opacity duration-300 pointer-events-none hidden md:block">
<div class="absolute -inset-1 border-2 border-dashed border-white dark:border-gray-900"></div>
</div>
</div>
</div>
</div>Composants associés
Composant d’info-bulle Micro-interactions
Un composant d’info-bulle simple mais attrayant avec des animations de micro-interaction subtiles, un design réactif et une prise en charge du thème sombre construit avec Tailwind CSS. Aucun JavaScript n’est requis.
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.
Glassmorphism Monochromatique Simple Infobulle
Un composant d’info-bulle simple, réactif et compatible avec le mode sombre avec un style Glassmorphism, un schéma de couleurs monochromatiques pour les blogs et les sites de contenu.