Back to Discover
Tailwind CSS Tooltip and Dropdown Code

Amelia
Created Nov 03, 2025
0 views
0 likes
0 comments
0 forks
Export Fork Like
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<body class="bg-gray-50 min-h-screen flex items-center justify-center p-8">
  <div class="max-w-4xl w-full space-y-12">

    <!-- Tooltips Section -->
    <div class="bg-white rounded-lg shadow-sm p-8">
      <h2 class="text-2xl font-semibold text-gray-800 mb-6">Tooltips</h2>

      <div class="flex flex-wrap gap-6">
        <!-- Top Tooltip -->
        <div x-data="{ show: false }" class="relative">
          <button 
                  @mouseenter="show = true" 
                  @mouseleave="show = false"
                  class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition flex items-center gap-2"
                  >
            <ion-icon name="information-circle-outline"></ion-icon>
            Hover Me (Top)
          </button>
          <div 
               x-show="show"
               x-transition:enter="transition ease-out duration-200"
               x-transition:enter-start="opacity-0 translate-y-1"
               x-transition:enter-end="opacity-100 translate-y-0"
               x-transition:leave="transition ease-in duration-150"
               x-transition:leave-start="opacity-100 translate-y-0"
               x-transition:leave-end="opacity-0 translate-y-1"
               class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-2 bg-gray-900 text-white text-sm rounded-lg whitespace-nowrap"
               style="display: none;"
               >
            This is a tooltip on top
            <div class="absolute top-full left-1/2 -translate-x-1/2 -mt-1 border-4 border-transparent border-t-gray-900"></div>
          </div>
        </div>

        <!-- Bottom Tooltip -->
        <div x-data="{ show: false }" class="relative">
          <button 
                  @mouseenter="show = true" 
                  @mouseleave="show = false"
                  class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition flex items-center gap-2"
                  >
            <ion-icon name="help-circle-outline"></ion-icon>
            Hover Me (Bottom)
          </button>
          <div 
               x-show="show"
               x-transition:enter="transition ease-out duration-200"
               x-transition:enter-start="opacity-0 -translate-y-1"
               x-transition:enter-end="opacity-100 translate-y-0"
               x-transition:leave="transition ease-in duration-150"
               x-transition:leave-start="opacity-100 translate-y-0"
               x-transition:leave-end="opacity-0 -translate-y-1"
               class="absolute top-full left-1/2 -translate-x-1/2 mt-2 px-3 py-2 bg-gray-900 text-white text-sm rounded-lg whitespace-nowrap"
               style="display: none;"
               >
            This is a tooltip on bottom
            <div class="absolute bottom-full left-1/2 -translate-x-1/2 -mb-1 border-4 border-transparent border-b-gray-900"></div>
          </div>
        </div>

        <!-- Right Tooltip -->
        <div x-data="{ show: false }" class="relative">
          <button 
                  @mouseenter="show = true" 
                  @mouseleave="show = false"
                  class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition flex items-center gap-2"
                  >
            <ion-icon name="checkmark-circle-outline"></ion-icon>
            Hover Me (Right)
          </button>
          <div 
               x-show="show"
               x-transition:enter="transition ease-out duration-200"
               x-transition:enter-start="opacity-0 -translate-x-1"
               x-transition:enter-end="opacity-100 translate-x-0"
               x-transition:leave="transition ease-in duration-150"
               x-transition:leave-start="opacity-100 translate-x-0"
               x-transition:leave-end="opacity-0 -translate-x-1"
               class="absolute left-full top-1/2 -translate-y-1/2 ml-2 px-3 py-2 bg-gray-900 text-white text-sm rounded-lg whitespace-nowrap"
               style="display: none;"
               >
            This is a tooltip on right
            <div class="absolute right-full top-1/2 -translate-y-1/2 -mr-1 border-4 border-transparent border-r-gray-900"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- Dropdowns Section -->
    <div class="bg-white rounded-lg shadow-sm p-8">
      <h2 class="text-2xl font-semibold text-gray-800 mb-6">Dropdowns</h2>

      <div class="flex flex-wrap gap-6">
        <!-- Basic Dropdown -->
        <div x-data="{ open: false }" @click.away="open = false" class="relative">
          <button 
                  @click="open = !open"
                  class="px-4 py-2 bg-gray-800 text-white rounded-lg hover:bg-gray-900 transition flex items-center gap-2"
                  >
            <ion-icon name="menu-outline"></ion-icon>
            Menu
            <ion-icon :name="open ? 'chevron-up-outline' : 'chevron-down-outline'"></ion-icon>
          </button>
          <div 
               x-show="open"
               x-transition:enter="transition ease-out duration-200"
               x-transition:enter-start="opacity-0 scale-95"
               x-transition:enter-end="opacity-100 scale-100"
               x-transition:leave="transition ease-in duration-150"
               x-transition:leave-start="opacity-100 scale-100"
               x-transition:leave-end="opacity-0 scale-95"
               class="absolute top-full left-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 py-1"
               style="display: none;"
               >
            <a href="#" class="flex items-center gap-3 px-4 py-2 text-gray-700 hover:bg-gray-100 transition">
              <ion-icon name="home-outline"></ion-icon>
              Dashboard
            </a>
            <a href="#" class="flex items-center gap-3 px-4 py-2 text-gray-700 hover:bg-gray-100 transition">
              <ion-icon name="person-outline"></ion-icon>
              Profile
            </a>
            <a href="#" class="flex items-center gap-3 px-4 py-2 text-gray-700 hover:bg-gray-100 transition">
              <ion-icon name="settings-outline"></ion-icon>
              Settings
            </a>
            <hr class="my-1 border-gray-200">
            <a href="#" class="flex items-center gap-3 px-4 py-2 text-red-600 hover:bg-red-50 transition">
              <ion-icon name="log-out-outline"></ion-icon>
              Logout
            </a>
          </div>
        </div>

        <!-- User Dropdown -->
        <div x-data="{ open: false }" @click.away="open = false" class="relative">
          <button 
                  @click="open = !open"
                  class="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-gray-100 transition"
                  >
            <div class="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center text-white font-semibold">
              JD
            </div>
            <span class="text-gray-700 font-medium">John Doe</span>
            <ion-icon :name="open ? 'chevron-up-outline' : 'chevron-down-outline'" class="text-gray-500"></ion-icon>
          </button>
          <div 
               x-show="open"
               x-transition:enter="transition ease-out duration-200"
               x-transition:enter-start="opacity-0 scale-95"
               x-transition:enter-end="opacity-100 scale-100"
               x-transition:leave="transition ease-in duration-150"
               x-transition:leave-start="opacity-100 scale-100"
               x-transition:leave-end="opacity-0 scale-95"
               class="absolute top-full right-0 mt-2 w-56 bg-white rounded-lg shadow-lg border border-gray-200 py-2"
               style="display: none;"
               >
            <div class="px-4 py-2 border-b border-gray-200">
              <p class="text-sm font-semibold text-gray-800">John Doe</p>
              <p class="text-xs text-gray-500">john.doe@example.com</p>
            </div>
            <a href="#" class="flex items-center gap-3 px-4 py-2 text-gray-700 hover:bg-gray-100 transition">
              <ion-icon name="person-outline"></ion-icon>
              My Account
            </a>
            <a href="#" class="flex items-center gap-3 px-4 py-2 text-gray-700 hover:bg-gray-100 transition">
              <ion-icon name="notifications-outline"></ion-icon>
              Notifications
            </a>
            <a href="#" class="flex items-center gap-3 px-4 py-2 text-gray-700 hover:bg-gray-100 transition">
              <ion-icon name="help-circle-outline"></ion-icon>
              Help & Support
            </a>
            <hr class="my-1 border-gray-200">
            <a href="#" class="flex items-center gap-3 px-4 py-2 text-red-600 hover:bg-red-50 transition">
              <ion-icon name="log-out-outline"></ion-icon>
              Sign Out
            </a>
          </div>
        </div>

        <!-- Actions Dropdown -->
        <div x-data="{ open: false }" @click.away="open = false" class="relative">
          <button
                  @click="open = !open"
                  class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition flex items-center gap-2"
                  >
            <ion-icon name="ellipsis-horizontal"></ion-icon>
            Actions
          </button>
          <div 
               x-show="open"
               x-transition:enter="transition ease-out duration-200"
               x-transition:enter-start="opacity-0 scale-95"
               x-transition:enter-end="opacity-100 scale-100"
               x-transition:leave="transition ease-in duration-150"
               x-transition:leave-start="opacity-100 scale-100"
               x-transition:leave-end="opacity-0 scale-95"
               class="absolute top-full right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 py-1"
               style="display: none;"
               >
            <a href="#" class="flex items-center gap-3 px-4 py-2 text-gray-700 hover:bg-gray-100 transition">
              <ion-icon name="create-outline"></ion-icon>
              Edit
            </a>
            <a href="#" class="flex items-center gap-3 px-4 py-2 text-gray-700 hover:bg-gray-100 transition">
              <ion-icon name="copy-outline"></ion-icon>
              Duplicate
            </a>
            <a href="#" class="flex items-center gap-3 px-4 py-2 text-gray-700 hover:bg-gray-100 transition">
              <ion-icon name="share-social-outline"></ion-icon>
              Share
            </a>
            <hr class="my-1 border-gray-200">
            <a href="#" class="flex items-center gap-3 px-4 py-2 text-red-600 hover:bg-red-50 transition">
              <ion-icon name="trash-outline"></ion-icon>
              Delete
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
Comments (0)

No comments yet. Be the first!