Memphis_Real_Estate_Tooltip

<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>