Tooltip

Stable

A pure-CSS tooltip component using DaisyUI theme tokens for consistent color and spacing. No JavaScript required.

API Reference

Attribute	Description	Type	Default
`tip`	Text content to display in the tooltip	string	`""`
`position`	Position of the tooltip relative to the element	string	`"top"`
`color`	Sets the tooltip color theme	string	`""`
`open`	Forces the tooltip to be always visible	boolean	`False`
`<c-tooltip.content>`	Optional slot for rich HTML tooltip content (icons, multiple lines, custom markup)	slot	`—`

position

top bottom left right

color

neutral primary secondary accent info success warning error

CSS-only disclosure: the tooltip uses DaisyUI's CSS :hover and :focus-within approach. Keyboard users can trigger it by tabbing to the wrapped element.

Icon-only triggers: when wrapping an icon button without visible text, ensure the button has an aria-label that describes its action. The tooltip text supplements but does not replace an accessible name.

Color alone: do not use tooltip color as the sole differentiator for meaning — pair semantic colors with descriptive tip text.

Examples

Usage


<c-tooltip tip="Hello! This is a tooltip">
  <c-button color="primary">Hover me</c-button>
</c-tooltip>

Basic Tooltip

<c-tooltip tip="Hello! This is a tooltip">
  <c-button color="primary">Hover me</c-button>
</c-tooltip>

Positioning

<c-tooltip tip="Top tooltip" position="top">
  <c-button>Top</c-button>
</c-tooltip>

<c-tooltip tip="Right tooltip" position="right">
  <c-button>Right</c-button>
</c-tooltip>

Colors

<c-tooltip tip="Primary tooltip" color="primary">
  <c-button color="primary">Primary</c-button>
</c-tooltip>

Always Visible

<c-tooltip tip="I'm always visible!" color="info" open>
  <c-button color="info">Always Visible</c-button>
</c-tooltip>

Custom Content

<c-tooltip color="primary" position="top">
  <c-tooltip.content>
    <div class="animate-bounce text-white -rotate-3 text-lg font-black">
      🎉 Wow!
    </div>
  </c-tooltip.content>
  <c-button color="primary">Custom Content</c-button>
</c-tooltip>

<c-tooltip color="success">
  <c-tooltip.content>
    <div class="flex items-center gap-2 text-white">
      <c-icon name="check" size="16" />
      <span class="font-semibold">Success!</span>
    </div>
  </c-tooltip.content>
  <c-button color="success">With Icon</c-button>
</c-tooltip>

Real-world Examples

Icon actions

Status indicators

Online

Degraded

Offline

<c-tooltip tip="Edit item" position="top">
  <c-button size="sm" variant="ghost" color="info">
    <c-icon name="edit" size="16" />
  </c-button>
</c-tooltip>

<c-tooltip tip="Service is running normally" color="success">
  <div class="badge badge-success">Online</div>
</c-tooltip>

Direct DaisyUI Usage

<button
  class="btn btn-outline tooltip tooltip-top tooltip-primary"
  data-tip="Tooltip from DaisyUI class">
  Direct tooltip
</button>