Back to Index

Tooltips & Popovers

EN DE TR

Guidance

Use tooltips for short, non-interactive hints. Use popovers when the content needs structure, multiple lines, or actions.

When To Use Tooltips

Short labels for icons
One-line explanations for controls
Keyboard accessible hover/focus hints

When To Use Popovers

Multi-line descriptions
Headers, footers, and grouped content
Inline quick actions without opening a modal

Framework Contract

Tooltip Classes

.ak-tooltip-trigger creates the relative positioning context.

.ak-tooltip-content is the floating hint element.

.ak-tooltip-right, .ak-tooltip-bottom, .ak-tooltip-left change placement.

Top placement is the default when no direction modifier is present.

<button type="button" class="ak-tooltip-trigger ak-btn">
  Save
  <span class="ak-tooltip-content" role="tooltip">Saves your draft</span>
</button>

Popover Classes

.ak-popover-trigger creates the positioning context.

.ak-popover-content is the floating panel.

.ak-popover-header, .ak-popover-body, .ak-popover-footer structure content.

.ak-popover-sm, .ak-popover-lg, .ak-popover-interactive extend behavior.

<div tabindex="0" role="button"
  class="ak-popover-trigger ak-popover-right ak-btn ak-btn-outline">
  More
  <div class="ak-popover-content">
    <div class="ak-popover-header">Quick Actions</div>
    <div class="ak-popover-body">Structured guidance or actions.</div>
  </div>
</div>

Tooltip Positions

All four placement classes already exist in the framework. The default tooltip opens above the trigger.

<button type="button" class="ak-tooltip-trigger ak-btn">...</button>
<button type="button" class="ak-tooltip-trigger ak-tooltip-right ak-btn ak-btn-outline">...</button>
<button type="button" class="ak-tooltip-trigger ak-tooltip-bottom ak-btn ak-btn-secondary">...</button>
<button type="button" class="ak-tooltip-trigger ak-tooltip-left ak-btn ak-btn-ghost">...</button>

Tooltip Patterns

Icon Actions

Recommended for icon-only buttons where the visible label would add clutter.

<button type="button" class="ak-tooltip-trigger ak-btn ak-btn-square" aria-label="Edit item">
  <i data-lucide="pencil" class="ak-w-4 ak-h-4"></i>
  <span class="ak-tooltip-content" role="tooltip">Edit item</span>
</button>

Inline Help

Use this when a field needs one compact explanation, but not a whole help panel.

Keep this token private.

<div class="ak-flex ak-items-center ak-gap-3">
  <input type="text" class="ak-input">
  <button type="button" class="ak-tooltip-trigger ak-btn ak-btn-square ak-btn-ghost">
    <i data-lucide="info" class="ak-w-4 ak-h-4"></i>
    <span class="ak-tooltip-content" role="tooltip">Used for server-to-server requests</span>
  </button>
</div>

Popovers

Positions & Sizes

Use popovers when the content needs hierarchy, multiple lines, or a clearer visual container.

Default Popover
Top Placement
Use this for structured guidance that is still lightweight.
Small Right
Compact status note.
Large Bottom
Release Checklist
Popover bodies can span multiple lines and hold denser context than a tooltip.
<div tabindex="0" role="button" class="ak-popover-trigger ak-popover-bottom ak-popover-lg ak-btn ak-btn-secondary">
  Large Bottom
  <div class="ak-popover-content">
    <div class="ak-popover-header">Release Checklist</div>
    <div class="ak-popover-body">Popover bodies can span multiple lines.</div>
  </div>
</div>

Interactive Popover

Choose .ak-popover-interactive only when the floating panel contains clickable controls.

Quick Actions
Team Access
Invite editors, copy a review link, or change visibility without leaving the current screen. 
<div tabindex="0" role="button"
  class="ak-popover-trigger ak-popover-interactive ak-popover-right ak-btn ak-btn-outline">
  Quick Actions
  <div class="ak-popover-content">
    <div class="ak-popover-header">Team Access</div>
    <div class="ak-popover-body">Invite editors or copy a review link.</div>
    <div class="ak-popover-footer">
      <button type="button" class="ak-btn ak-btn-sm ak-btn-ghost">Later</button>
      <button type="button" class="ak-btn ak-btn-sm ak-btn-primary">Invite</button>
    </div>
  </div>
</div>