Material Design 工具提示组件 - 预订/预订

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4 font-sans">

  <div class="relative group">
    <button class="relative z-10 px-6 py-3 rounded-lg text-lg font-medium 
                   bg-blue-600 hover:bg-blue-700 text-white 
                   focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75
                   transition duration-300 ease-in-out
                   dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-600">
      View Reservation Details
    </button>

    <!-- Tooltip Container -->
    <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-4 
                  w-80 md:w-96 lg:w-[420px] 
                  p-0 rounded-xl 
                  shadow-xl 
                  transform scale-95 opacity-0 group-hover:scale-100 group-hover:opacity-100 
                  group-focus-within:scale-100 group-focus-within:opacity-100 
                  transition-all duration-300 ease-in-out 
                  origin-bottom 
                  pointer-events-none group-hover:pointer-events-auto group-focus-within:pointer-events-auto
                  overflow-hidden 
                  bg-white dark:bg-gray-800 
                  border border-gray-200 dark:border-gray-700">

      <!-- Material Design Header -->
      <div class="relative px-5 py-4 bg-gradient-to-r from-blue-600 to-indigo-600 dark:from-blue-700 dark:to-indigo-700 
                  text-white rounded-t-xl overflow-hidden">
        <div class="absolute inset-0 bg-pattern-dots opacity-10"></div>
        <h3 class="text-xl font-bold mb-1">Reservation #A1B2C3D4</h3>
        <p class="text-sm opacity-90">Your upcoming booking details</p>

        <!-- Avatar or Icon -->
        <div class="absolute top-4 right-5">
          <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white/50 shadow-md">
        </div>
      </div>

      <!-- Tooltip Content -->
      <div class="p-5 text-gray-700 dark:text-gray-300 text-sm">

        <div class="grid grid-cols-2 gap-y-3 gap-x-4 mb-4">
          <div>
            <p class="font-semibold text-gray-500 dark:text-gray-400">Service</p>
            <p class="text-base">Dental Check-up</p>
          </div>
          <div>
            <p class="font-semibold text-gray-500 dark:text-gray-400">Provider</p>
            <p class="text-base">Dr. Emily White</p>
          </div>
          <div>
            <p class="font-semibold text-gray-500 dark:text-gray-400">Date</p>
            <p class="text-base">Oct 26, 2024</p>
          </div>
          <div>
            <p class="font-semibold text-gray-500 dark:text-gray-400">Time</p>
            <p class="text-base">10:15 AM - 11:00 AM</p>
          </div>
          <div class="col-span-2">
            <p class="font-semibold text-gray-500 dark:text-gray-400">Location</p>
            <p class="text-base">123 Health Dr, C<ctrl61>linic City</p>
          </div>
        </div>

        <hr class="my-4 border-gray-200 dark:border-gray-700">

        <div class="flex justify-between items-center mb-4">
          <div>
            <p class="font-semibold text-gray-500 dark:text-gray-400">Status</p>
            <span class="px-3 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-800 dark:bg-green-700 dark:text-green-100">
              Confirmed
            </span>
          </div>
          <div class="text-right">
            <p class="font-semibold text-gray-500 dark:text-gray-400">Attendees</p>
            <div class="flex -space-x-2 justify-end mt-1">
              <img class="w-7 h-7 rounded-full border-2 border-white dark:border-gray-800" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Attendee 1">
              <img class="w-7 h-7 rounded-full border-2 border-white dark:border-gray-800" src="https://randomuser.me/api/portraits/men/50.jpg" alt="Attendee 2">
              <div class="w-7 h-7 rounded-full border-2 border-white dark:border-gray-800 bg-gray-200 dark:bg-gray-700 flex items-center justify-center text-xs text-gray-600 dark:text-gray-300">+1</div>
            </div>
          </div>
        </div>

        <!-- Call to Action Buttons -->
        <div class="pt-4 border-t border-gray-100 dark:border-gray-700 flex justify-end space-x-2">
          <button class="px-4 py-2 rounded-lg text-sm font-medium 
                         text-gray-600 hover:text-gray-900 hover:bg-gray-100 
                         focus:outline-none focus:ring-2 focus:ring-gray-300 
                         dark:text-gray-300 dark:hover:text-gray-100 dark:hover:bg-gray-700 dark:focus:ring-gray-600">
            Reschedule
          </button>
          <button class="px-4 py-2 rounded-lg text-sm font-medium 
                         bg-blue-500 hover:bg-blue-600 text-white 
                         focus:outline-none focus:ring-2 focus:ring-blue-400 
                         dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-500">
            Manage Booking
          </button>
        </div>
      </div>

      <!-- Tail for the tooltip -->
      <div class="absolute top-full left-1/2 -ml-2 w-0 h-0 border-x-8 border-x-transparent border-t-8 border-t-white 
                  dark:border-t-gray-800 opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition-opacity duration-300"></div>

    </div>
  </div>
</div>

<!-- Custom pattern for header (can be placed in a style block or external CSS if allowed) -->
<style>
  .bg-pattern-dots {
    background-image: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
    background-size: 8px 8px;
  }
</style>