Search Components

Tooltip

Additional information shown on hover

Brutalist Monochromatic Tooltip

A complex, brutalist-style monochromatic tooltip component designed for blog/content sites, featuring multiple interactive elements and full responsiveness with dark mode support.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4 transition-colors duration-300">
  <div class="relative group max-w-sm mx-auto">
    <a href="#" class="inline-block px-6 py-3 text-lg font-extrabold tracking-tight uppercase border-4 border-gray-800 dark:border-gray-200 text-gray-800 dark:text-gray-200 bg-transparent transition-all duration-300 transform -skew-x-6 hover:translate-x-1 hover:-translate-y-1 hover:shadow-brutal dark:hover:shadow-brutal-dark focus:outline-none focus:ring-4 focus:ring-gray-400 dark:focus:ring-gray-600">
      Hover Me
    </a>

    <div class="absolute hidden group-hover:block transition-all duration-300 ease-out transform scale-0 origin-bottom-left group-hover:scale-100 mt-4 md:mt-6 left-1/2 -ml-24 w-60 sm:w-72 md:w-80 lg:w-96 p-4 md:p-6 bg-gray-200 dark:bg-gray-800 border-4 border-gray-800 dark:border-gray-200 shadow-brutal dark:shadow-brutal-dark z-50 overflow-hidden">
      <div class="absolute -top-4 left-6 w-0 h-0 border-l-8 border-l-transparent border-r-8 border-r-transparent border-b-8 border-b-gray-800 dark:border-b-gray-200 transform rotate-[135deg]"></div>
      <div class="absolute -top-4 left-6 w-0 h-0 border-l-8 border-l-transparent border-r-8 border-r-transparent border-b-8 border-b-gray-200 dark:border-b-gray-800 transform rotate-[135deg] -translate-x-0.5 -translate-y-0.5"></div>

      <h3 class="text-xl md:text-2xl font-extrabold uppercase mb-2 text-gray-900 dark:text-gray-100 border-b-2 border-dashed border-gray-500 dark:border-gray-500 pb-1">
        Brutal Tip Title
      </h3>
      <p class="text-sm md:text-base text-gray-700 dark:text-gray-300 mb-4 tracking-tight leading-snug">
        This is a raw and unpolished tooltip designed with a brutalist aesthetic. It's meant to convey information bluntly and directly. 
        Consider this a visual declaration, not a gentle suggestion.
      </p>
      
      <div class="mb-4 flex flex-col sm:flex-row items-start sm:items-center gap-2 sm:gap-4 border-t-2 border-dashed border-gray-500 dark:border-gray-500 pt-3">
        <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Author" class="w-10 h-10 rounded-full border-2 border-gray-800 dark:border-gray-200 object-cover flex-shrink-0">
        <div>
          <p class="text-xs md:text-sm font-bold uppercase text-gray-800 dark:text-gray-200">By John 'The Hammer' Doe</p>
          <p class="text-xs text-gray-600 dark:text-gray-400">March 15, 2023</p>
        </div>
      </div>

      <div class="flex flex-wrap gap-2 mb-4">
        <span class="px-2 py-1 text-xs font-bold uppercase border-2 border-gray-800 dark:border-gray-200 text-gray-800 dark:text-gray-200 bg-gray-300 dark:bg-gray-700 select-none">#Brutalism</span>
        <span class="px-2 py-1 text-xs font-bold uppercase border-2 border-gray-800 dark:border-gray-200 text-gray-800 dark:text-gray-200 bg-gray-300 dark:bg-gray-700 select-none">#Monochromatic</span>
        <span class="px-2 py-1 text-xs font-bold uppercase border-2 border-gray-800 dark:border-gray-200 text-gray-800 dark:text-gray-200 bg-gray-300 dark:bg-gray-700 select-none">#Content</span>
      </div>

      <a href="#" class="inline-block w-full text-center px-4 py-2 text-sm md:text-base font-extrabold uppercase border-4 border-gray-800 dark:border-gray-200 text-gray-800 dark:text-gray-200 bg-transparent transition-all duration-300 transform -skew-x-3 hover:translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-sm dark:hover:shadow-brutal-sm-dark focus:outline-none focus:ring-4 focus:ring-gray-400 dark:focus:ring-gray-600">
        Read More
      </a>

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

<style>
  /* Custom shadows for brutalism style */
  .shadow-brutal {
    box-shadow: 10px 10px 0px 0px rgba(0, 0, 0, 1);
  }
  .dark .shadow-brutal-dark {
    box-shadow: 10px 10px 0px 0px rgba(255, 255, 255, 1);
  }
  .shadow-brutal-sm {
    box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 1);
  }
  .dark .shadow-brutal-sm-dark {
    box-shadow: 4px 4px 0px 0px rgba(255, 255, 255, 1);
  }

  /* Triangle for tooltip */
  .group-hover\:block {
    left: 50%;
    transform: translateX(-50%) translateY(10px) rotate(0deg) scale(0);
    transform-origin: bottom center;
  }
  .group:hover .group-hover\:block {
    transform: translateX(-50%) translateY(0px) rotate(0deg) scale(1);
  }
  @media (min-width: 768px) {
    .group-hover\:block {
      left: 50%;
      transform: translateX(-50%) translateY(20px) rotate(0deg) scale(0);
      transform-origin: bottom center;
    }
    .group:hover .group-hover\:block {
      transform: translateX(-50%) translateY(0px) rotate(0deg) scale(1);
    }
  }
</style>

Minimalist Pastel E-commerce Tooltip

Minimalist pastel tooltip component for e-commerce, with responsive design and dark mode support.

Open Preview

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

  <!-- Tooltip Container -->
  <div class="group relative flex">
    <button class="px-4 py-2 bg-pink-200 text-pink-800 rounded-md shadow-sm
                   hover:bg-pink-300 focus:outline-none focus:ring-2 focus:ring-pink-400 focus:ring-opacity-75
                   dark:bg-pink-700 dark:text-pink-100 dark:hover:bg-pink-600">
      Hover for Product Info
    </button>

    <!-- Tooltip Content -->
    <div class="absolute bottom-full mb-2 hidden group-hover:block
                w-64 p-3 rounded-lg shadow-lg bg-white text-gray-800
                text-sm text-center
                dark:bg-gray-700 dark:text-gray-100
                transform -translate-x-1/2 left-1/2
                opacity-0 group-hover:opacity-100 transition-opacity duration-300">
      <p class="font-semibold text-lg mb-2">Product Name</p>
      <p class="text-md mb-3">A brief description of the product and its key features for e-commerce.</p>
      <p class="text-pink-500 font-bold">Price: $49.99</p>

      <!-- Tooltip Arrow -->
      <div class="absolute top-full left-1/2 -ml-2 w-0 h-0 border-8 border-transparent
                  border-t-white dark:border-t-gray-700"></div>
    </div>
  </div>

</div>

Neumorphic Tooltip

Neumorphic Tooltip for Portfolio

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 p-10">
  <div class="relative flex items-center group">
    <button class="px-6 py-3 bg-gray-200 dark:bg-gray-700 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark text-gray-800 dark:text-gray-200 font-semibold focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75 transition-all duration-300">
      Hover Me
    </button>
    <div class="absolute bottom-full mb-3 hidden group-hover:block px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark text-gray-700 dark:text-gray-300 text-sm opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all duration-300">
      This is a neumorphic tooltip!
      <div class="absolute left-1/2 transform -translate-x-1/2 top-full w-0 h-0 border-t-8 border-t-gray-200 dark:border-t-gray-700 border-x-8 border-x-transparent"></div>
    </div>
  </div>
</div>

A complex, responsive, dark-theme supported, Skeuomorphic-Vibrant Tooltip Component for Dashboards using Tailwind CSS. No JavaScript needed, only HTML with Tailwind classes. For dark mode, use Tailwind's dark: prefix for styling. Images are from picsum.photos and randomuser.me.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="relative flex items-center group">
    <button class="px-6 py-3 text-white transition-all duration-300 transform bg-gradient-to-br from-blue-500 to-indigo-600 rounded-lg shadow-2xl hover:scale-105 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800
                   dark:from-blue-700 dark:to-indigo-800
                   font-bold text-lg
                   relative overflow-hidden
                   before:absolute before:inset-0 before:bg-gradient-to-br before:from-white before:to-transparent before:opacity-0 before:transition-opacity before:duration-300
                   hover:before:opacity-20
                   after:absolute after:inset-0 after:border-t-2 after:border-l-2 after:border-white after:opacity-0 after:transition-opacity after:duration-300
                   hover:after:opacity-100
                   ">
      Hover for Dashboard Insights
    </button>
    
    <div class="absolute bottom-full mb-6 w-96 p-6
                bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900
                text-gray-900 dark:text-gray-100
                rounded-2xl shadow-skeuomorphic
                opacity-0 group-hover:opacity-100 transition-opacity duration-500
                transform translate-y-4 group-hover:-translate-y-0
                pointer-events-none group-hover:pointer-events-auto
                border-t-4 border-l-4 border-gray-300 dark:border-gray-600
                overflow-hidden
                before:absolute before:inset-0 before:bg-gradient-to-br before:from-white before:to-transparent before:opacity-10 before:rounded-2xl
                after:absolute after:bottom-0 after:left-1/2 after:-mb-4 after:-ml-2 after:w-0 after:h-0 after:border-solid after:border-8 after:border-transparent
                after:border-t-gray-400 dark:after:border-t-gray-900 after:drop-shadow-lg
                ">
      
      <div class="flex items-center space-x-4 mb-4 border-b pb-4 border-gray-300 dark:border-gray-600">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-blue-500 shadow-lg">
        <div>
          <p class="font-bold text-lg text-indigo-700 dark:text-indigo-300">Analytics Summary</p>
          <p class="text-sm text-gray-700 dark:text-gray-300">Last updated: 2 minutes ago</p>
        </div>
      </div>

      <div class="grid grid-cols-2 gap-4 mb-4">
        <div class="bg-gray-300 dark:bg-gray-800 p-3 rounded-lg shadow-inner-skeuomorphic">
          <p class="text-sm text-gray-700 dark:text-gray-300">Total Sales:</p>
          <p class="font-bold text-xl text-green-600 dark:text-green-400">$12,450</p>
        </div>
        <div class="bg-gray-300 dark:bg-gray-800 p-3 rounded-lg shadow-inner-skeuomorphic">
          <p class="text-sm text-gray-700 dark:text-gray-300">New Users:</p>
          <p class="font-bold text-xl text-purple-600 dark:text-purple-400">320</p>
        </div>
        <div class="bg-gray-300 dark:bg-gray-800 p-3 rounded-lg shadow-inner-skeuomorphic">
          <p class="text-sm text-gray-700 dark:text-gray-300">Bounce Rate:</p>
          <p class="font-bold text-xl text-red-600 dark:text-red-400">1.5%</p>
        </div>
        <div class="bg-gray-300 dark:bg-gray-800 p-3 rounded-lg shadow-inner-skeuomorphic">
          <p class="text-sm text-gray-700 dark:text-gray-300">Avg. Session:</p>
          <p class="font-bold text-xl text-blue-600 dark:text-blue-400">8m 30s</p>
        </div>
      </div>

      <div class="flex justify-between items-center text-sm text-gray-700 dark:text-gray-300">
        <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline font-medium">View Full Report</a>
        <div class="flex items-center space-x-2">
          <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 9.586V6z" clip-rule="evenodd"></path>
          </svg>
          <span>Real-time Data</span>
        </div>
      </div>

      <div class="absolute inset-0 border-r-4 border-b-4 border-gray-300 dark:border-gray-600 rounded-2xl pointer-events-none opacity-50"></div>
      <div class="absolute inset-0 bg-stone-300 dark:bg-stone-800 opacity-20 rounded-2xl filter blur-sm"></div>

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

<style>
  /* Custom shadow for Skeuomorphism */
  .shadow-skeuomorphic {
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3), -10px -10px 20px rgba(255, 255, 255, 0.1);
  }
  .dark .shadow-skeuomorphic {
     box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.7), -10px -10px 20px rgba(255, 255, 255, 0.05);
  }
  .shadow-inner-skeuomorphic {
    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.2), inset -5px -5px 10px rgba(255, 255, 255, 0.1);
  }
  .dark .shadow-inner-skeuomorphic {
    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.5), inset -5px -5px 10px rgba(255, 255, 255, 0.05);
  }
  .group:hover .absolute.bottom-full:after {
    border-top-color: #A0AEC0; /* Light Gray */
  }
  .dark .group:hover .absolute.bottom-full:after {
    border-top-color: #4A5568; /* Dark Gray */
  }
</style>

Tooltip Component

A responsive dark-themed tooltip component, part of a Triadic color scheme, suitable for a portfolio. Built with Tailwind CSS for a simple, minimal aesthetic.

Open Preview

                <div class="relative flex justify-center items-center h-screen bg-gray-900 dark:bg-gray-800">
  <div class="group relative flex">
    <button class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-300 ease-in-out">Hover Me</button>
    <div class="opacity-0 w-48 bg-gray-700 dark:bg-gray-900 text-white text-center text-xs rounded-lg py-2 absolute z-10 group-hover:opacity-100 bottom-full -translate-x-1/2 left-1/2 ml-0 mb-3 pointer-events-none transition-opacity duration-300">
      <p>This is a triadic color scheme tooltip for your portfolio.</p>
      <svg class="absolute text-gray-700 dark:text-gray-900 h-2 w-full left-0 top-full" x="0px" y="0px" viewBox="0 0 255 255" xml:space="preserve"><polygon class="fill-current" points="0,0 127.5,127.5 255,0"/></svg>
    </div>
  </div>
</div>

Brutalism Tooltip Component

Brutalism-style tooltip component for social media, featuring a grayscale color scheme and complex interactive elements. It is responsive and supports dark mode using Tailwind CSS, with no JavaScript.

Open Preview

                <div class="relative flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <!-- Tooltip Container -->
  <div class="group relative flex flex-col items-center">
    <!-- User Avatar (Trigger for Tooltip) -->
    <img class="w-24 h-24 rounded-full border-4 border-gray-900 dark:border-gray-100 cursor-pointer object-cover" src="https://api.randomuser.me/portraits/men/32.jpg" alt="User Avatar">
    
    <!-- Tooltip Content -->
    <div class="absolute bottom-full mb-6 w-80 p-6 bg-gray-900 dark:bg-gray-100 text-gray-100 dark:text-gray-900 border-4 border-gray-700 dark:border-gray-300 transform translate-y-4 opacity-0 group-hover:opacity-100 group-hover:-translate-y-0 transition-all duration-300 ease-in-out pointer-events-none group-hover:pointer-events-auto shadow-[8px_8px_0_rgba(0,0,0,0.8)] dark:shadow-[8px_8px_0_rgba(255,255,255,0.4)]">
      <h3 class="text-xl font-bold uppercase mb-2">User Profile</h3>
      <p class="text-sm border-b-2 border-gray-700 dark:border-gray-300 pb-2 mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      
      <div class="flex justify-between items-center text-sm mb-2">
        <span class="font-semibold">Followers:</span>
        <span>1.2M</span>
      </div>
      <div class="flex justify-between items-center text-sm mb-4">
        <span class="font-semibold">Following:</span>
        <span>345</span>
      </div>

      <div class="grid grid-cols-3 gap-2 mb-4">
        <img class="w-full h-16 object-cover border-2 border-gray-700 dark:border-gray-300" src="https://picsum.photos/seed/social1/100/100" alt="Post 1">
        <img class="w-full h-16 object-cover border-2 border-gray-700 dark:border-gray-300" src="https://picsum.photos/seed/social2/100/100" alt="Post 2">
        <img class="w-full h-16 object-cover border-2 border-gray-700 dark:border-gray-300" src="https://picsum.photos/seed/social3/100/100" alt="Post 3">
      </div>

      <a href="#" class="block w-full py-2 text-center uppercase font-bold bg-gray-700 dark:bg-gray-300 text-gray-100 dark:text-gray-900 border-2 border-gray-900 dark:border-gray-100 hover:bg-gray-600 dark:hover:bg-gray-400 transition-colors duration-200">
        View Profile
      </a>
      
      <!-- Brutalist Arrow -->
      <div class="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-[calc(100%-8px)] w-0 h-0 border-l-[20px] border-l-transparent border-r-[20px] border-r-transparent border-t-[20px] border-t-gray-900 dark:border-t-gray-100 group-hover:translate-y-[calc(100%-12px)] transition-transform duration-300"></div>
    </div>
  </div>
</div>

Skeuomorphic Dashboard Tooltip

A complex, skeuomorphic tooltip component for a dashboard, featuring a triadic color scheme and responsive design with dark mode support, built with Tailwind CSS and no JavaScript.

Open Preview

                <div class="relative flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <!-- Tooltip Container -->
  <div class="relative group">
    <!-- Trigger Element (e.g., a button or icon) -->
    <button class="px-6 py-3 text-white rounded-lg shadow-lg bg-gradient-to-br from-blue-600 to-blue-800 hover:from-blue-700 hover:to-blue-900 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 transition-all duration-300 transform hover:scale-105">
      Hover for Dashboard Info
    </button>

    <!-- Tooltip Content -->
    <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-4 w-80 p-6 rounded-xl shadow-2xl opacity-0 group-hover:opacity-100 group-hover:visible transition-all duration-500 transform scale-90 group-hover:scale-100
                bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900
                border-4 border-gray-300 dark:border-gray-600
                hover:from-gray-300 hover:to-gray-500 dark:hover:from-gray-600 dark:hover:to-gray-800
                flex flex-col space-y-4
                pointer-events-none group-hover:pointer-events-auto">

      <!-- Top Bar with Icon and Title -->
      <div class="flex items-center pb-3 border-b-2 border-gray-300 dark:border-gray-600">
        <svg class="w-8 h-8 mr-3 text-indigo-700 dark:text-indigo-400" 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.75 17L12 21.75l2.25-4.75M12 17V3m-4.5 9h9"></path>
        </svg>
        <h3 class="text-xl font-bold text-gray-800 dark:text-gray-100 drop-shadow-md">Dashboard Overview</h3>
      </div>

      <!-- Key Metrics Section -->
      <div class="grid grid-cols-2 gap-4">
        <div class="p-3 rounded-lg bg-gradient-to-br from-red-300 to-red-500 dark:from-red-700 dark:to-red-900 shadow-inner">
          <p class="text-sm font-semibold text-white dark:text-gray-200">Revenue</p>
          <p class="text-lg font-bold text-white dark:text-gray-100">$12,450</p>
        </div>
        <div class="p-3 rounded-lg bg-gradient-to-br from-green-300 to-green-500 dark:from-green-700 dark:to-green-900 shadow-inner">
          <p class="text-sm font-semibold text-white dark:text-gray-200">Users</p>
          <p class="text-lg font-bold text-white dark:text-gray-100">8,900</p>
        </div>
        <div class="p-3 rounded-lg bg-gradient-to-br from-yellow-300 to-yellow-500 dark:from-yellow-700 dark:to-yellow-900 shadow-inner">
          <p class="text-sm font-semibold text-gray-800 dark:text-gray-200">Completion</p>
          <p class="text-lg font-bold text-gray-800 dark:text-gray-100">75%</p>
        </div>
        <div class="p-3 rounded-lg bg-gradient-to-br from-purple-300 to-purple-500 dark:from-purple-700 dark:to-purple-900 shadow-inner">
          <p class="text-sm font-semibold text-white dark:text-gray-200">Avg. Time</p>
          <p class="text-lg font-bold text-white dark:text-gray-100">4:30 min</p>
        </div>
      </div>

      <!-- Recent Activity / News Feed Mock-up -->
      <div class="p-3 rounded-lg bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-800 dark:to-gray-900 shadow-inner border border-gray-200 dark:border-gray-700">
        <h4 class="mb-2 text-md font-semibold text-gray-700 dark:text-gray-200">Recent Activity</h4>
        <ul class="space-y-2 text-sm text-gray-600 dark:text-gray-300">
          <li class="flex items-center">
            <img class="object-cover w-6 h-6 mr-2 rounded-full shadow" src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar">
            <span>New user

Tooltip Component

A responsive Material Design tooltip component with monochromatic color scheme for e-commerce, featuring dark mode support. No JavaScript, HTML and Tailwind CSS only.

Open Preview

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

  <!-- Product Card (Example to show tooltip in context) -->
  <div class="group relative w-full max-w-sm bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transition-all duration-300 hover:shadow-xl">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=1" alt="Product Image">
    <div class="p-6">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Stylish Headphones</h3>
      <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Immerse yourself in rich, clear sound with these premium headphones.</p>
      <div class="flex items-center justify-between">
        <span class="text-2xl font-bold text-gray-900 dark:text-gray-50">$149.99</span>
        
        <!-- Tooltip Trigger (e.g., Add to Cart Button) -->
        <button class="relative bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800 text-white font-medium py-2 px-4 rounded-full transition-colors duration-300 group focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
          Add to Cart

          <!-- Tooltip Content -->
          <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-max px-3 py-1.5 bg-gray-800 dark:bg-gray-100 text-white dark:text-gray-900 text-sm rounded-md opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity duration-300 pointer-events-none shadow-lg">
            Add item to your shopping cart
            <svg class="absolute top-full left-1/2 -translate-x-1/2 w-3 h-3 text-gray-800 dark:text-gray-100 transform rotate-180" fill="currentColor" viewBox="0 0 20 20">
              <path d="M10 0L0 10h20L10 0z"/>
            </svg>
          </div>
        </button>
      </div>
    </div>
  </div>

  <!-- Another Tooltip Example (e.g., Info Icon) -->
  <div class="group relative ml-12">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-gray-500 dark:text-gray-400 cursor-pointer transition-colors duration-300 hover:text-blue-600 dark:hover:text-blue-500" viewBox="0 0 20 20" fill="currentColor">
      <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2h1a1 1 0 001-1V9a1 1 0 00-1-1H9zm6 3a1 1 0 100 2h2a1 1 0 100-2h-2z" clip-rule="evenodd" />
    </svg>

    <!-- Tooltip Content -->
    <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-max px-3 py-1.5 bg-gray-800 dark:bg-gray-100 text-white dark:text-gray-900 text-sm rounded-md opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity duration-300 pointer-events-none shadow-lg">
      More information about the product
      <svg class="absolute top-full left-1/2 -translate-x-1/2 w-3 h-3 text-gray-800 dark:text-gray-100 transform rotate-180" fill="currentColor" viewBox="0 0 20 20">
        <path d="M10 0L0 10h20L10 0z"/>
      </svg>
    </div>
  </div>

</div>

Tooltip Component

A neumorphic tooltip component with a complementary color scheme, moderate complexity, and responsive design with dark theme support, suitable for a blog or content consumption.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 p-10">

  <div class="relative flex flex-col items-center group">
    <button class="px-6 py-3 bg-gray-200 dark:bg-gray-800 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark text-gray-700 dark:text-gray-300 font-semibold transition-all duration-300 hover:shadow-neumorphic-light-hover dark:hover:shadow-neumorphic-dark-hover focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75">
      Hover Me
    </button>
    
    <div class="absolute bottom-full mb-4 hidden group-hover:block w-64 p-4 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-300 text-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300 transform translate-y-2 group-hover:translate-y-0 pointer-events-none group-hover:pointer-events-auto">
      <p class="font-bold text-lg mb-2 text-blue-600 dark:text-blue-400">Neumorphic Tooltip</p>
      <p>This is a an example of a neumorphic tooltip. It uses subtle shadows to create a soft, extruded look from the background.</p>
      <div class="absolute left-1/2 transform -translate-x-1/2 bottom-[-10px] w-0 h-0 border-l-8 border-l-transparent border-r-8 border-r-transparent border-t-8 border-t-gray-200 dark:border-t-gray-800"></div>
    </div>
  </div>

</div>

<style>
  .shadow-neumorphic-light {
    box-shadow: 6px 6px 12px #a3b1c6, -6px -6px 12px #ffffff;
  }

  .dark .shadow-neumorphic-dark {
    box-shadow: 6px 6px 12px #1c1c1c, -6px -6px 12px #2e2e2e;
  }

  .shadow-neumorphic-light-hover {
    box-shadow: inset 3px 3px 6px #a3b1c6, inset -3px -3px 6px #ffffff;
  }

  .dark .shadow-neumorphic-dark-hover {
    box-shadow: inset 3px 3px 6px #1c1c1c, inset -3px -3px 6px #2e2e2e;
  }
  
  /* Complementary Colors (Example: Blue and Orange for accents) */
  .text-blue-600 {
    color: #2563eb;
  }
  .dark .text-blue-400 {
    color: #60a5fa;
  }

  .text-orange-500 {
    color: #f97316;
  }
  .dark .text-orange-400 {
    color: #fb923c;
  }
</style>

Minimalist_Tooltip

Minimalist/Flat Design Tooltip Component for E-commerce with responsive design and dark theme support. Uses Complementary color scheme and has Moderate complexity.

Open Preview

                <div class="relative group">
  <button class="text-blue-700 hover:text-blue-800 dark:text-red-400 dark:hover:text-red-500 font-bold py-2 px-4 rounded">Hover Me</button>
  <div class="absolute bottom-full mb-2 hidden group-hover:block w-48 bg-blue-100 text-blue-800 text-sm rounded py-1 px-2 dark:bg-red-900 dark:text-red-100">
    Product information or details here.
  </div>
</div>

Search Components

Categories

Tooltip