Tooltip

Stable

A short, non-interactive hover/focus hint using DaisyUI theme tokens for consistent color and spacing. Initialised through Tippy.js (loaded globally in body_end_js.html), not a native title attribute or pure CSS.

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

Tippy-driven, not CSS-only: shown on hover or focus via Tippy.js's default triggers, unless open forces manual control. 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>

Usage notes

Scope: a short, non-interactive hint attached to another element. Not for content the user needs to act on or that requires reading time, use a Popover instead.

Must: use either tip or the content slot, not both, the component doesn't define precedence if both are supplied.

Should: keep tip text short. There's no OS-level length handling to fall back on since this is initialised through Tippy.js, not a native title attribute.

aria-describedby is automatic: Tippy.js wires this between the trigger and tooltip content on its own. Don't add a manual aria-describedby, it can conflict.

Not a substitute for a visible label: if the information is required to use the element correctly, it needs to be visible, not tooltip-only. This includes form field help text, use the fieldset/label pattern instead.

Colour rule

Documented rule (11 August 2026), not a code change: Tooltip MUST always render with the default neutral/content colour (the plain <c-tooltip> with no color prop set). Never pass color="primary", color="error", or any other semantic colour to a tooltip.

This is enforced by convention and code review, not by the component itself, the color prop still exists and still works in kaiko_ui/templates/cotton/tooltip/index.html. Flag any tooltip using it in review rather than assuming the component blocks it.

Primary specifically: color="primary" is the one most likely to slip through, since it's the default color on so many wrapped buttons and reads as "just matching the button." It's still disallowed on the tooltip itself. Primary is reserved for the page or section's main call-to-action, giving a tooltip that colour creates a second, competing signal of importance that the tooltip isn't meant to carry, a tooltip is a supporting hint, not an emphasis element.

Known contradiction, flagged rather than silently fixed: the "Colors" and "Real-world Examples" sections further up this same page still demonstrate the now-disallowed color prop (primary, success, warning, error, and so on). Those examples predate this rule and haven't been updated or removed, since that would mean editing the original page content, which was intentionally left untouched. Someone should revisit those examples so the showcase page stops contradicting its own rule.