Tailwind CSS Tooltip - Sailboat UI

Default

<script src="https://unpkg.com/@ryangjchandler/[email protected]/dist/cdn.min.js"></script>
<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/tippy.css" />
<div class="flex h-40 items-center justify-center space-x-5">
  <div x-data="{ tooltip: 'This is a tooltip.' }">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6 cursor-pointer text-secondary-500" x-tooltip="tooltip">
      <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
    </svg>
  </div>
</div>

Theme

<script src="https://unpkg.com/@ryangjchandler/[email protected]/dist/cdn.min.js"></script>
<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/tippy.css" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/themes/light.css" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/animations/shift-away.css" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/animations/scale.css" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/animations/perspective.css" />
<div class="flex h-40 items-center justify-center space-x-5">
  <div x-data="{ tooltip: 'This is a dark tooltip.' }">
    <button type="button" x-tooltip="tooltip" class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-center text-sm font-medium text-gray-700 shadow-sm transition-all hover:bg-gray-100 focus:ring focus:ring-gray-100 disabled:cursor-not-allowed disabled:border-gray-100 disabled:bg-gray-50 disabled:text-gray-400">Dark</button>
  </div>
  <div x-data="{ tooltip: 'This is a light tooltip.' }">
    <button type="button" x-tooltip.theme.light="tooltip" class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-center text-sm font-medium text-gray-700 shadow-sm transition-all hover:bg-gray-100 focus:ring focus:ring-gray-100 disabled:cursor-not-allowed disabled:border-gray-100 disabled:bg-gray-50 disabled:text-gray-400">Light</button>
  </div>
</div>

Placement

<script src="https://unpkg.com/@ryangjchandler/[email protected]/dist/cdn.min.js"></script>
<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/tippy.css" />
<div class="flex h-40 items-center justify-center space-x-5">
  <span x-data="{ tooltip: 'This is a top tooltip.' }">
    <button type="button" x-tooltip="tooltip" class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-center text-sm font-medium text-gray-700 shadow-sm transition-all hover:bg-gray-100 focus:ring focus:ring-gray-100 disabled:cursor-not-allowed disabled:border-gray-100 disabled:bg-gray-50 disabled:text-gray-400">Tooltip on top</button>
  </span>
  <span x-data="{ tooltip: 'This is a right tooltip.' }">
    <button type="button" x-tooltip.placement.right="tooltip" class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-center text-sm font-medium text-gray-700 shadow-sm transition-all hover:bg-gray-100 focus:ring focus:ring-gray-100 disabled:cursor-not-allowed disabled:border-gray-100 disabled:bg-gray-50 disabled:text-gray-400">Tooltip on right</button>
  </span>
  <span x-data="{ tooltip: 'This is a bottom tooltip.' }">
    <button type="button" x-tooltip.placement.bottom="tooltip" class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-center text-sm font-medium text-gray-700 shadow-sm transition-all hover:bg-gray-100 focus:ring focus:ring-gray-100 disabled:cursor-not-allowed disabled:border-gray-100 disabled:bg-gray-50 disabled:text-gray-400">Tooltip on bottom</button>
  </span>
  <span x-data="{ tooltip: 'This is a left tooltip.' }">
    <button type="button" x-tooltip.placement.left="tooltip" class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-center text-sm font-medium text-gray-700 shadow-sm transition-all hover:bg-gray-100 focus:ring focus:ring-gray-100 disabled:cursor-not-allowed disabled:border-gray-100 disabled:bg-gray-50 disabled:text-gray-400">Tooltip on left</button>
  </span>
</div>

Triggering

<script src="https://unpkg.com/@ryangjchandler/[email protected]/dist/cdn.min.js"></script>
<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/tippy.css" />
<div class="flex h-40 items-center justify-center space-x-5">
  <span x-data="{ tooltip: 'This is a hover tooltip.' }">
    <button type="button" x-tooltip="tooltip" class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-center text-sm font-medium text-gray-700 shadow-sm transition-all hover:bg-gray-100 focus:ring focus:ring-gray-100 disabled:cursor-not-allowed disabled:border-gray-100 disabled:bg-gray-50 disabled:text-gray-400">Tooltip hover</button>
  </span>
  <span x-data="{ tooltip: 'This is a click tooltip.' }">
    <button type="button" x-tooltip.on.click="tooltip" class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-center text-sm font-medium text-gray-700 shadow-sm transition-all hover:bg-gray-100 focus:ring focus:ring-gray-100 disabled:cursor-not-allowed disabled:border-gray-100 disabled:bg-gray-50 disabled:text-gray-400">Tooltip click</button>
  </span>
</div>

Animation

<script src="https://unpkg.com/@ryangjchandler/[email protected]/dist/cdn.min.js"></script>
<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/tippy.css" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/animations/shift-away.css" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/animations/scale.css" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/animations/perspective.css" />
<div class="flex h-40 items-center justify-center space-x-5">
  <span x-data="{ tooltip: 'This is a fade tooltip.' }">
    <button type="button" x-tooltip="tooltip" class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-center text-sm font-medium text-gray-700 shadow-sm transition-all hover:bg-gray-100 focus:ring focus:ring-gray-100 disabled:cursor-not-allowed disabled:border-gray-100 disabled:bg-gray-50 disabled:text-gray-400">Fade</button>
  </span>
  <span x-data="{ tooltip: 'This is a shift away tooltip.' }">
    <button type="button" x-tooltip.animation.shift-away="tooltip" class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-center text-sm font-medium text-gray-700 shadow-sm transition-all hover:bg-gray-100 focus:ring focus:ring-gray-100 disabled:cursor-not-allowed disabled:border-gray-100 disabled:bg-gray-50 disabled:text-gray-400">Shift away</button>
  </span>
  <span x-data="{ tooltip: 'This is a scale tooltip.' }">
    <button type="button" x-tooltip.animation.scale="tooltip" class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-center text-sm font-medium text-gray-700 shadow-sm transition-all hover:bg-gray-100 focus:ring focus:ring-gray-100 disabled:cursor-not-allowed disabled:border-gray-100 disabled:bg-gray-50 disabled:text-gray-400">Scale</button>
  </span>
  <span x-data="{ tooltip: 'This is a perspective tooltip.' }">
    <button type="button" x-tooltip.animation.perspective="tooltip" class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-center text-sm font-medium text-gray-700 shadow-sm transition-all hover:bg-gray-100 focus:ring focus:ring-gray-100 disabled:cursor-not-allowed disabled:border-gray-100 disabled:bg-gray-50 disabled:text-gray-400">Perspective</button>
  </span>
</div>

Without arrow

<script src="https://unpkg.com/@ryangjchandler/[email protected]/dist/cdn.min.js"></script>
<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/tippy.css" />
<div class="flex h-40 items-center justify-center space-x-5">
  <span x-data="{ tooltip: 'This is a tooltip.' }">
    <button type="button" x-tooltip.arrowless="tooltip" class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-center text-sm font-medium text-gray-700 shadow-sm transition-all hover:bg-gray-100 focus:ring focus:ring-gray-100 disabled:cursor-not-allowed disabled:border-gray-100 disabled:bg-gray-50 disabled:text-gray-400">Button</button>
  </span>
</div>