Search Components

Tooltip

Additional information shown on hover

Tooltip Component

A responsive tooltip component with vibrant colors, microinteractions, and dark mode support, suitable for industrial and manufacturing applications. Displays information on hover/focus.

Open Preview

                <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">
    <!-- Trigger Element -->
    <button
      class="peer px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg shadow-lg 
             focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 
             transition-all duration-300 ease-in-out transform hover:scale-105 
             dark:bg-blue-800 dark:hover:bg-blue-700"
      aria-describedby="tooltip-info"
    >
      <svg class="inline-block w-5 h-5 mr-2 -mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1m.707 6.364l-.707-.707M12 21v-1m-4.636-1.636l-.707.707M3 12H2m1.636-4.636l.707-.707M10 21h4a2 2 0 002-2V9a2 2 0 00-2-2h-4a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
      View Machine Status
    </button>

    <!-- Tooltip Content -->
    <div
      id="tooltip-info"
      role="tooltip"
      class="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 px-4 py-2 
             bg-gradient-to-br from-green-500 to-teal-600 text-white text-sm font-medium rounded-lg shadow-xl 
             whitespace-nowrap transition-all duration-300 ease-out 
             opacity-0 invisible 
             group-hover:opacity-100 group-hover:visible group-hover:-translate-y-2 
             group-focus-within:opacity-100 group-focus-within:visible group-focus-within:-translate-y-2 
             dark:from-green-700 dark:to-teal-800 
             sm:text-base"
    >
      
      <div class="relative flex items-center">
        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.756a4.898 4.898 0 011.041 3.565A6.003 6.003 0 0124 12c0 2.21-1.229 4.143-3.053 5.176l-1.921 1.921A8.96 8.96 0 0112 24c-2.868 0-5.514-.766-7.85-2.096l-1.921-1.921A6.003 6.003 0 010 12c0-2.21 1.229-4.143 3.053-5.176l1.921-1.921A8.96 8.96 0 0112 0c2.868 0 5.514.766 7.85 2.096l1.921 1.921A6.003 6.003 0 0124 12z"></path></svg>
        Machine #1789: Operating Normally

        <!-- Tail/Arrow for the Tooltip -->
        <svg class="absolute top-full left-1/2 -ml-2 w-4 h-4 text-green-600 dark:text-green-800 rotate-180 -mt-1" fill="currentColor" viewBox="0 0 24 24"><path d="M24 22h-24l12-12z"/></svg>
      </div>

    </div>
  </div>

</div>

Paper_Rainbow_Tooltip_Component

A simple, responsive tooltip component with a paper/print-inspired design and a rainbow gradient background, suitable for forum/community platforms. Includes dark mode support.

Open Preview

                <div class="flex min-h-screen items-center justify-center bg-gray-100 p-4 dark:bg-gray-900 font-sans">
  <div class="relative group max-w-xs text-center">
    <button class="relative z-10 p-3 rounded-lg shadow-md transition-all duration-300 ease-in-out
                   bg-gradient-to-r from-red-500 via-yellow-500 to-indigo-500
                   text-white font-semibold text-lg
                   hover:scale-105 focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-700
                   dark:from-red-700 dark:via-yellow-700 dark:to-indigo-700">
      Hover for Info
    </button>

    <div class="absolute left-1/2 -translate-x-1/2 mt-3 p-4 pt-6
                opacity-0 invisible group-hover:opacity-100 group-hover:visible
                transition-all duration-300 ease-in-out transform group-hover:-translate-y-full
                w-64 sm:w-72 md:w-80 lg:w-96
                bg-white dark:bg-gray-800 rounded-lg shadow-xl outline outline-offset-4 outline-1 outline-gray-200 dark:outline-gray-700
                before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:-ml-2 before:w-0 before:h-0
                before:border-l-[8px] before:border-r-[8px] before:border-t-[8px]
                before:border-l-transparent before:border-r-transparent before:border-t-white dark:before:border-t-gray-800
                before:-translate-y-2 group-hover:before:-translate-y-1">
      <p class="text-gray-800 dark:text-gray-200 text-sm leading-relaxed mb-1
                font-serif italic tracking-wide group-hover:animate-fade-in">
        "The only source of knowledge is experience."
      </p>
      <p class="text-gray-600 dark:text-gray-400 text-xs font-mono subpixel-antialiased">
        - Albert Einstein
      </p>

      <!-- Tiny paper clip detail -->
      <div class="absolute top-1 left-1/2 -translate-x-1/2 w-4 h-4 rounded-full
                  bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-600 dark:to-gray-700
                  shadow-inner blur-[0.5px]
                  border border-gray-400 dark:border-gray-500"></div>
    </div>
  </div>
</div>

<!-- To make the 'fade-in' work (optional, but good for subtle animation) -->
<style>
  @keyframes fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .group-hover\:animate-fade-in {
    animation: fade-in 0.3s ease-out forwards;
    animation-delay: 0.1s; /* Slight delay after tooltip is visible */
  }
</style>

3D_Real_Estate_Tooltip

A moderately complex, responsive tooltip component with 3D design elements and a warm sunset color scheme, suitable for real estate property listings. Includes dark mode support.

Open Preview

                <div class="p-4 sm:p-8 bg-gradient-to-br from-orange-50 to-red-50 dark:from-gray-900 dark:to-gray-800 min-h-screen flex items-center justify-center font-sans">

  <div class="relative group w-full max-w-sm mx-auto perspective-1000">
    <!-- Tooltip Trigger (Simulated 3D Card) -->
    <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-xl overflow-hidden
                transform-gpu transition-all duration-300 ease-in-out
                group-hover:rotate-x-3 group-hover:rotate-y-3 
                group-hover:scale-105 group-hover:-translate-y-2
                group-hover:shadow-3xl-lg 
                border border-solid border-orange-200 dark:border-gray-700
                active:scale-100 active:rotate-0 active:translate-y-0
                cursor-pointer
                p-4 sm:p-6">

      <div class="flex items-center space-x-4 mb-4">
        <img src="https://picsum.photos/60/60?random=1" alt="Property Thumbnail" class="w-16 h-16 rounded-lg object-cover shadow-md">
        <div>
          <h3 class="text-lg font-semibold text-gray-900 dark:text-white capitalize">Luxury Villa</h3>
          <p class="text-sm text-gray-600 dark:text-gray-400">Miami Beach, FL</p>
        </div>
      </div>
      <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-2">
        Stunning beachfront property with panoramic ocean views and private pool. 
        Ideal for luxurious living or investment.
      </p>

      <div class="flex justify-between items-center text-sm font-medium">
        <span class="text-orange-600 dark:text-orange-400">$2.5M</span>
        <button class="px-4 py-2 bg-orange-500 text-white rounded-lg shadow-md 
                       hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-50
                       dark:bg-orange-700 dark:hover:bg-orange-600">View Details</button>
      </div>


      <!-- Floating Action Button (Simulated) -->
      <div class="absolute -bottom-4 -right-4 w-12 h-12 flex items-center justify-center 
                  bg-gradient-to-br from-orange-400 to-red-500 text-white 
                  rounded-full shadow-lg transform-gpu transition-all duration-300 ease-in-out
                  group-hover:scale-125 group-hover:rotate-12 group-hover:shadow-xl">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
        </svg>
      </div>

    </div>

    <!-- Tooltip Content -->
    <div class="opacity-0 invisible group-hover:opacity-100 group-hover:visible 
                absolute bottom-[calc(100%+15px)] left-1/2 -translate-x-1/2 
                transform-gpu transition-all duration-300 ease-in-out 
                group-hover:-translate-y-0 group-hover:scale-100 group-hover:translate-z-50
                select-none
                w-[calc(100%+40px)] sm:w-[calc(100%+60px)] p-4 sm:p-5
                bg-gradient-to-br from-orange-400 to-red-500 dark:from-orange-700 dark:to-red-800 
                rounded-xl shadow-2xl z-10 
                border-4 border-solid border-white/50 dark:border-gray-700/50 
                before:content-[''] before:absolute before:bottom-[-8px] before:left-1/2 
                before:-translate-x-1/2 before:w-0 before:h-0 
                before:border-l-[12px] before:border-l-transparent 
                before:border-r-[12px] before:border-r-transparent 
                before:border-t-[12px] before:border-t-orange-400 dark:before:border-t-orange-700">

      <h4 class="text-white text-lg font-bold mb-2 flex items-center justify-between">
        Property Highlights
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2-2m2 2l-2 2M15 9V4a2 2 0 00-2-2H6a2 2 0 00-2 2v7.586a1 1 0 01-.293.707l-2.414 2.414A1 1 0 003 16h.01L5 16h2a1 1 0 011 1v4a1 1 0 01-1 1H3a1 1 0 01-1-1v-4a1 1 0 00-.293-.707l-2.414-2.414A1 1 0 000 13V6a2 2 0 012-2h10a2 2 0 012 2v1" />
        </svg>
      </h4>
      <ul class="text-white/90 text-sm space-y-1 mb-3">
        <li class="flex items-center">
          <svg class="w-4 h-4 mr-1 text-white flex-shrink-0 animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
          5 Beds, 6 Baths
        </li>
        <li class="flex items-center">
          <svg class="w-4 h-4 mr-1 text-white flex-shrink-0 animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
          5,200 sqft
        </li>
        <li class="flex items-center">
          <svg class="w-4 h-4 mr-1 text-white flex-shrink-0 animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
          Oceanfront Lot
        </li>
      </ul>

      <div class="flex items-center text-sm mb-2 opacity-90">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Agent Avatar" class="w-8 h-8 rounded-full border-2 border-white/70 shadow-md mr-2">
        <span class="font-medium text-white">Contact Agent:</span>
        <a href="#" class="ml-2 text-white underline hover:opacity-80 transition-opacity">John Doe</a>
      </div>

      <div class="text-right">
        <button class="px-3 py-1 bg-white bg-opacity-20 text-white rounded-md text-xs
                       hover:bg-opacity-30 transition-colors focus:outline-none focus:ring-1 focus:ring-white focus:ring-opacity-70">
          See More Images
        </button>
      </div>

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

<style>
  /* Adding custom perspective for the 3D effect without needing a parent container */
  .perspective-1000 {
    perspective: 1000px;
  }

  /* Custom shadow for a more pronounced 3D effect on hover */
  .shadow-3xl-lg {
    box-shadow: 0 25px 50px -12px rgba(249, 115, 22, 0.4), 0 10px 10px -5px rgba(249, 115, 22, 0.2), 0 0 0 1px rgba(249, 115, 22, 0.1);
  }
  .dark .shadow-3xl-lg {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7), 0 10px 10px -5px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.3);
  }

  /* Translate-z for 3D effect, works with perspective */
  .group-hover\:translate-z-50 {
    transform: translateZ(50px);
  }
  /* Ensures the pseudo-element pointer also has a border */
  .before\:border-t-orange-400 {
    border-top-color: var(--tw-gradient-from);
  }
  .dark .before\:border-t-orange-700 {
    border-top-color: var(--tw-gradient-from);
  }
</style>

Material Design Tooltip Component - Booking/Reservation

A complex, responsive Material Design-inspired tooltip component for booking/reservation systems, featuring muted/desaturated colors, depth effects, and dark mode support. It provides detailed information upon hover/focus.

Open Preview

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

Monospace_Developer_Tooltip_Component_Healthcare

A simple, monospace-inspired tooltip component with warm sunset tones, designed for healthcare applications. Features responsive design and dark mode support.

Open Preview

                <div class="relative flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 min-h-[200px] font-mono">
  <!-- Tooltip Container -->
  <div class="group relative inline-block">
    <!-- Trigger Element (e.g., an icon or text) -->
    <p class="cursor-pointer text-orange-600 dark:text-orange-400 text-sm md:text-base p-2 border border-orange-400 dark:border-orange-600 rounded-md shadow-sm transition-all duration-300 ease-in-out hover:border-orange-500 hover:shadow-md">
      <svg class="inline-block mr-2 w-4 h-4 md:w-5 md:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
      </svg>
      Info: Patient ID
    </p>

    <!-- Tooltip Content -->
    <div class="opacity-0 w-64 md:w-80 bg-gradient-to-br from-orange-400 to-red-500 dark:from-red-600 dark:to-yellow-700 text-white text-xs md:text-sm rounded py-2 px-3 absolute z-10 bottom-full left-1/2 -translate-x-1/2 mb-2 pointer-events-none transition-opacity duration-300 group-hover:opacity-100 shadow-lg border border-orange-300 dark:border-yellow-600 overflow-hidden break-words">
      <p class="mb-1 font-bold text-yellow-100 dark:text-orange-200">Diagnosis Code Explained:</p>
      <p class="text-yellow-50 dark:text-orange-50">ICD-10-CM code Z00.00 is for 'General adult medical examination without abnormal findings'.</p>
      <p class="text-yellow-50 dark:text-orange-50 mt-1">Applicable for routine health check-ups.</p>

      <!-- Tail for the tooltip -->
      <svg class="absolute text-orange-400 dark:text-red-600 h-2 w-full left-0 bottom-[-8px]"
           viewBox="0 0 255 125" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
        <path d="M0 125L127.5 0L255 125H0Z"/>
      </svg>
    </div>
  </div>
</div>

Bauhaus_Autumn_Tooltip_Component

A Bauhaus-inspired tooltip component with an autumn color scheme, designed for fashion and beauty brands. Features a functional geometric design, responsiveness, and dark mode support.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-orange-50 dark:bg-gray-900 p-4 font-sans">
  <div class="relative group max-w-sm">
    <button class="px-6 py-3 bg-red-800 text-white font-bold uppercase tracking-wider text-sm rounded-none shadow-lg transform transition duration-300 ease-in-out hover:scale-105 focus:outline-none focus:ring-2 focus:ring-red-600 focus:ring-opacity-75 dark:bg-red-900 dark:hover:bg-red-800">
      Hover for Details
    </button>

    <div class="absolute left-1/2 -translate-x-1/2 bottom-full mb-4 w-64 p-4 
                bg-yellow-800 dark:bg-gray-800 
                text-white dark:text-gray-200 
                border-4 border-amber-900 dark:border-gray-700 
                opacity-0 invisible group-hover:opacity-100 group-hover:visible 
                transition-opacity duration-300 ease-in-out 
                group-hover:translate-y-0 transform translate-y-4
                shadow-xl z-10 
                origin-bottom 
                before:content-[''] before:absolute before:left-1/2 before:-translate-x-1/2 before:top-full before:border-l-[10px] before:border-l-transparent before:border-r-[10px] before:border-r-transparent before:border-t-[10px] before:border-t-yellow-800 dark:before:border-t-gray-800">
      <h3 class="text-lg font-extrabold mb-2 uppercase tracking-wide text-amber-100 dark:text-gray-100">Luxury Serum X</h3>
      <p class="text-sm leading-relaxed mb-3 text-amber-200 dark:text-gray-300">
        Unlock radiant skin with our concentrated formula. Infused with natural extracts.
      </p>
      <div class="flex items-center space-x-2 mb-3">
        <img src="https://randomuser.me/api/portraits/women/67.jpg" alt="Model" class="w-8 h-8 rounded-none border border-amber-600 dark:border-gray-600 object-cover">
        <span class="text-xs font-semibold text-amber-300 dark:text-gray-400">A favorite of beauty influencers!</span>
      </div>
      <a href="#" class="inline-block px-4 py-2 bg-amber-900 text-amber-100 font-bold text-xs uppercase tracking-wider hover:bg-amber-700 dark:bg-gray-700 dark:hover:bg-gray-600 transition-colors duration-200">
        Shop Now
      </a>
    </div>
  </div>
</div>

Tooltip Component - Art Deco Grayscale

A complex Art Deco inspired tooltip component for documentation and wiki sites, featuring a grayscale color scheme, geometric patterns, and rich content. Fully responsive with dark mode support.

Open Preview

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

  <!-- Background geometric patterns (simplified for Art Deco feel) -->
  <div class="absolute inset-0 pointer-events-none opacity-5 dark:opacity-10">
    <div class="absolute top-1/4 left-1/4 w-48 h-48 border border-gray-400 dark:border-gray-700 transform rotate-45"></div>
    <div class="absolute bottom-1/4 right-1/4 w-64 h-64 border-2 border-gray-300 dark:border-gray-800 transform -rotate-30"></div>
    <div class="absolute top-1/3 right-1/4 w-32 h-32 border-dashed border-gray-400 dark:border-gray-700 transform rotate-60"></div>
  </div>

  <!-- Tooltip Trigger Wrapper -->
  <div class="group relative inline-block z-10">
    <button class="relative px-6 py-3 bg-gradient-to-br from-gray-800 to-gray-600 dark:from-gray-200 dark:to-gray-400 text-gray-100 dark:text-gray-900 font-bold text-lg tracking-wider rounded-md 
                   shadow-lg transition-all duration-300 ease-in-out 
                   hover:from-gray-700 hover:to-gray-500 hover:dark:from-gray-300 hover:dark:to-gray-500 
                   active:scale-95 overflow-hidden border border-gray-500 dark:border-gray-500 
                   focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">
      <span class="relative z-10">Explore Art Deco</span>
      <!-- Subtle geometric overlay on button -->
      <div class="absolute inset-0 bg-gradient-to-br from-transparent via-gray-700/10 to-gray-500/10 dark:via-gray-300/10 dark:to-gray-100/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
    </button>

    <!-- Tooltip Content -->
    <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-4 w-72 md:w-96 p-6 
                bg-white dark:bg-gray-800 border-2 border-gray-700 dark:border-gray-400 
                shadow-2xl rounded-lg opacity-0 pointer-events-none 
                group-hover:opacity-100 group-hover:pointer-events-auto 
                transform scale-90 group-hover:scale-100 transition-all duration-300 ease-in-out 
                origin-bottom-left z-20
                before:absolute before:left-1/2 before:top-full before:-translate-x-1/2 before:w-0 before:h-0 before:border-l-[12px] before:border-l-transparent before:border-r-[12px] before:border-r-transparent before:border-t-[12px] before:border-t-gray-700 dark:before:border-t-gray-400 
                after:absolute after:left-1/2 after:top-full after:-translate-x-1/2 after:mt-[2px] after:w-0 after:h-0 after:border-l-[10px] after:border-l-transparent after:border-r-[10px] after:border-r-transparent after:border-t-[10px] after:border-t-white dark:after:border-t-gray-800">

      <!-- Header Section -->
      <div class="flex items-center justify-between pb-4 mb-4 border-b border-gray-300 dark:border-gray-600 relative">
        <h3 class="text-xl md:text-2xl font-bold text-gray-900 dark:text-gray-100 tracking-wide leading-tight">
          <span class="relative inline-block z-10">The Art Deco Era</span>
          <!-- Title Underline/Accent -->
          <span class="absolute bottom-0 left-0 w-full h-1 bg-gray-500 dark:bg-gray-400 transform -skew-x-12 z-0"></span>
        </h3>
        <div class="flex space-x-2">
          <button aria-label="Favorites" class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors duration-200">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
          </button>
          <button aria-label="Share" class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors duration-200">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M15 8a3 3 0 10-2.977-2.63l-4.94 2.47a3 3 0 100 4.316l4.94 2.47a3 3 0 10.61-.307L12.067 12h-1.65a3 3 0 10-2.31 3h3.893l1.09-1.091a3 3 0 10.61.307z"></path></svg>
          </button>
        </div>
      </div>

      <!-- Main Content -->
      <div class="text-gray-700 dark:text-gray-300 text-sm md:text-base leading-relaxed mb-4">
        <p class="mb-3">Art Deco, short for Arts Décoratifs, is a distinctive style from the 1920s and 1930s, characterized by rich colors, bold geometric shapes, and lavish ornamentation.</p>
        <p class="mb-3">It emerged in France before WWI and became prominent in the 'Roaring Twenties,' influencing architecture, fashion, and visual arts globally.</p>
        <p>This era epitomized glamour, luxury, and technological progress.</p>
      </div>

      <!-- Key Features/Details (Geometric Blocks) -->
      <div class="grid grid-cols-2 gap-2 mb-4 border-t border-gray-300 dark:border-gray-600 pt-4">
        <div class="bg-gray-100 dark:bg-gray-700 p-2 rounded-sm border border-gray-300 dark:border-gray-600 relative overflow-hidden">
          <span class="block font-semibold text-gray-800 dark:text-gray-200 uppercase text-xs md:text-sm mb-1">Era</span>
          <span class="block text-gray-600 dark:text-gray-400 text-xs md:text-sm">1920s-1930s</span>
          <div class="absolute -top-2 -right-2 w-8 h-8 bg-gray-300 dark:bg-gray-600 transform rotate-45"></div>
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 p-2 rounded-sm border border-gray-300 dark:border-gray-600 relative overflow-hidden">
          <span class="block font-semibold text-gray-800 dark:text-gray-200 uppercase text-xs md:text-sm mb-1">Origin</span>
          <span class="block text-gray-600 dark:text-gray-400 text-xs md:text-sm">France</span>
          <div class="absolute -bottom-2 -left-2 w-8 h-8 bg-gray-300 dark:bg-gray-600 transform rotate-45"></div>
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 p-2 rounded-sm border border-gray-300 dark:border-gray-600 relative overflow-hidden col-span-2">
          <span class="block font-semibold text-gray-800 dark:text-gray-200 uppercase text-xs md:text-sm mb-1">Key Elements</span>
          <span class="block text-gray-600 dark:text-gray-400 text-xs md:text-sm">Geometric shapes, streamlined forms, luxurious materials.</span>
          <div class="absolute -top-2 left-1/2 -translate-x-1/2 w-8 h-8 bg-gray-300 dark:bg-gray-600 transform -rotate-45"></div>
        </div>
      </div>

      <!-- Related Links/Authors (List) -->
      <div class="border-t border-gray-300 dark:border-gray-600 pt-4">
        <h4 class="text-md md:text-lg font-semibold text-gray-900 dark:text-gray-100 mb-3">Further Reading</h4>
        <ul class="space-y-2">
          <li class="flex items-center text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-200 group">
            <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Author Avatar" class="w-6 h-6 rounded-full mr-3 border border-gray-400 dark:border-gray-600">
            <a href="#" class="underline-offset-2 hover:underline decoration-1 decoration-gray-500 dark:decoration-gray-400 text-sm md:text-base">The Legacy of Art Deco Architecture</a>
          </li>
          <li class="flex items-center text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-200 group">
            <img src="https://randomuser.me/api/portraits/men/8.jpg" alt="Author Avatar" class="w-6 h-6 rounded-full mr-3 border border-gray-400 dark:border-gray-600">
            <a href="#" class="underline-offset-2 hover:underline decoration-1 decoration-gray-500 dark:decoration-gray-400 text-sm md:text-base">From Paris to New York: Art Deco's Journey</a>
          </li>
          <li class="flex items-center text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-200 group">
            <img src="https://randomuser.me/api/portraits/women/15.jpg" alt="Author Avatar" class="w-6 h-6 rounded-full mr-3 border border-gray-400 dark:border-gray-600">
            <a href="#" class="underline-offset-2 hover:underline decoration-1 decoration-gray-500 dark:decoration-gray-400 text-sm md:text-base">Identifying Art Deco: A Style Guide</a>
          </li>
        </ul>
      </div>

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

Tooltip Component

A minimalist and flat design tooltip component for event/conference websites, featuring a black and white color scheme with a bright accent.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="relative group">
    <button class="px-6 py-3 bg-gray-800 text-white rounded-lg shadow-md hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:bg-gray-200 dark:text-gray-900 dark:hover:bg-gray-300 dark:focus:ring-purple-400 dark:focus:ring-offset-gray-900 transition-colors duration-200">
      Hover for Info
    </button>
    <div class="absolute bottom-full mb-2 left-1/2 -translate-x-1/2 w-48 p-3 bg-gray-900 text-white text-sm rounded-lg shadow-lg opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition-opacity duration-300 pointer-events-none group-hover:pointer-events-auto group-focus-within:pointer-events-auto z-10 dark:bg-gray-100 dark:text-gray-900 dark:border dark:border-gray-200
                before:content-[''] before:absolute before:top-full before:left-1/2 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">
      <p class="font-semibold mb-1 text-purple-400 dark:text-purple-600">Event Details</p>
      <p>This is important information about the conference event.</p>
      <div class="absolute -bottom-1 left-1/2 -ml-2 w-4 h-4 bg-gray-900 dark:bg-gray-100 transform rotate-45 pointer-events-none origin-bottom-left"></div>
    </div>
  </div>
</div>

Tooltip Component

A minimalist, flat-designed tooltip component for gaming interfaces, featuring black, white, and a bright accent color, with complex interactive elements and full responsiveness, including dark mode support.

Open Preview

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

Memphis_Real_Estate_Tooltip

A simple, responsive tooltip component for real estate applications, featuring a Memphis Design inspired aesthetic with a monochrome base and a vibrant accent color. Includes dark mode support.

Open Preview

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

Search Components

Categories

Tooltip