Tooltip

<div class="tooltip">
  <button class="btn">Hover me</button>
  <span class="tooltip-content">Hello tooltip!</span>
</div>

Requires: ux.min.css

<div class="relative inline-flex group">
  <button class="btn">Hover me</button>
  <span class="absolute bottom-full left-1/2 -translate-x-1/2 mb-1.5 px-2.5 py-1.5 bg-neutral text-neutral-content text-xs font-medium rounded-lg whitespace-nowrap pointer-events-none opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-opacity shadow-md z-700">Hello tooltip!</span>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS hover/focus

<div class="flex items-center gap-6 flex-wrap justify-center">
  <div class="tooltip">
    <button class="btn btn-outline">Top</button>
    <span class="tooltip-content">Top tooltip</span>
  </div>

  <div class="tooltip tooltip-bottom">
    <button class="btn btn-outline">Bottom</button>
    <span class="tooltip-content">Bottom tooltip</span>
  </div>

  <div class="tooltip tooltip-left">
    <button class="btn btn-outline">Left</button>
    <span class="tooltip-content">Left tooltip</span>
  </div>

  <div class="tooltip tooltip-right">
    <button class="btn btn-outline">Right</button>
    <span class="tooltip-content">Right tooltip</span>
  </div>
</div>

Requires: ux.min.css

<div class="flex items-center gap-6 flex-wrap justify-center">
  <div class="relative inline-flex group">
    <button class="btn btn-outline">Top</button>
    <span class="absolute bottom-full left-1/2 -translate-x-1/2 mb-1.5 px-2.5 py-1.5 bg-neutral text-neutral-content text-xs font-medium rounded-lg whitespace-nowrap pointer-events-none opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-opacity shadow-md z-700">Top tooltip</span>
  </div>

  <div class="relative inline-flex group">
    <button class="btn btn-outline">Bottom</button>
    <span class="absolute top-full left-1/2 -translate-x-1/2 mt-1.5 px-2.5 py-1.5 bg-neutral text-neutral-content text-xs font-medium rounded-lg whitespace-nowrap pointer-events-none opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-opacity shadow-md z-700">Bottom tooltip</span>
  </div>

  <div class="relative inline-flex group">
    <button class="btn btn-outline">Left</button>
    <span class="absolute right-full top-1/2 -translate-y-1/2 mr-1.5 px-2.5 py-1.5 bg-neutral text-neutral-content text-xs font-medium rounded-lg whitespace-nowrap pointer-events-none opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-opacity shadow-md z-700">Left tooltip</span>
  </div>

  <div class="relative inline-flex group">
    <button class="btn btn-outline">Right</button>
    <span class="absolute left-full top-1/2 -translate-y-1/2 ml-1.5 px-2.5 py-1.5 bg-neutral text-neutral-content text-xs font-medium rounded-lg whitespace-nowrap pointer-events-none opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-opacity shadow-md z-700">Right tooltip</span>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS positioning

<div class="flex items-center gap-4 flex-wrap justify-center">
  <div class="tooltip">
    <button class="btn btn-sm">Default</button>
    <span class="tooltip-content">Neutral</span>
  </div>

  <div class="tooltip tooltip-primary">
    <button class="btn btn-sm color-primary">Primary</button>
    <span class="tooltip-content">Primary</span>
  </div>

  <div class="tooltip tooltip-success">
    <button class="btn btn-sm color-success">Success</button>
    <span class="tooltip-content">Success</span>
  </div>

  <div class="tooltip tooltip-warning">
    <button class="btn btn-sm color-warning">Warning</button>
    <span class="tooltip-content">Warning</span>
  </div>

  <div class="tooltip tooltip-error">
    <button class="btn btn-sm color-error">Error</button>
    <span class="tooltip-content">Error</span>
  </div>
</div>

Requires: ux.min.css

<div class="flex items-center gap-4 flex-wrap justify-center">
  <div class="relative inline-flex group">
    <button class="btn btn-sm">Default</button>
    <span class="absolute bottom-full left-1/2 -translate-x-1/2 mb-1.5 px-2.5 py-1.5 bg-neutral text-neutral-content text-xs font-medium rounded-lg whitespace-nowrap pointer-events-none opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-opacity shadow-md z-700">Neutral</span>
  </div>

  <div class="relative inline-flex group">
    <button class="btn btn-sm color-primary">Primary</button>
    <span class="absolute bottom-full left-1/2 -translate-x-1/2 mb-1.5 px-2.5 py-1.5 bg-primary text-primary-content text-xs font-medium rounded-lg whitespace-nowrap pointer-events-none opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-opacity shadow-md z-700">Primary</span>
  </div>

  <div class="relative inline-flex group">
    <button class="btn btn-sm color-success">Success</button>
    <span class="absolute bottom-full left-1/2 -translate-x-1/2 mb-1.5 px-2.5 py-1.5 bg-success text-success-content text-xs font-medium rounded-lg whitespace-nowrap pointer-events-none opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-opacity shadow-md z-700">Success</span>
  </div>

  <div class="relative inline-flex group">
    <button class="btn btn-sm color-warning">Warning</button>
    <span class="absolute bottom-full left-1/2 -translate-x-1/2 mb-1.5 px-2.5 py-1.5 bg-warning text-warning-content text-xs font-medium rounded-lg whitespace-nowrap pointer-events-none opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-opacity shadow-md z-700">Warning</span>
  </div>

  <div class="relative inline-flex group">
    <button class="btn btn-sm color-error">Error</button>
    <span class="absolute bottom-full left-1/2 -translate-x-1/2 mb-1.5 px-2.5 py-1.5 bg-error text-error-content text-xs font-medium rounded-lg whitespace-nowrap pointer-events-none opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-opacity shadow-md z-700">Error</span>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS component