Tooltips

Tooltips provide additional information about an element when users hover over or focus on it. They help improve user understanding without cluttering the interface.

Basic Usage

Wrap any element with a tooltip to provide additional context on hover.

Basic Tooltip

100%

Hover me

<div class="flex items-center gap-4">
    <byte-tooltip content="This is a helpful tip">
      <byte-button>Hover me</byte-button>
    </byte-tooltip>

    <byte-tooltip content="Click to delete">
      <byte-button variant="ghost" color="red" icon="trash"></byte-button>
    </byte-tooltip>
  </div>

Positions

Tooltips can be positioned in four different directions relative to their trigger element.

Tooltip Positions

100%

Top

Right

Bottom

Left

<div class="flex items-center gap-4">
    <byte-tooltip content="Top tooltip" position="top">
      <byte-button>Top</byte-button>
    </byte-tooltip>

    <byte-tooltip content="Right tooltip" position="right">
      <byte-button>Right</byte-button>
    </byte-tooltip>

    <byte-tooltip content="Bottom tooltip" position="bottom">
      <byte-button>Bottom</byte-button>
    </byte-tooltip>

    <byte-tooltip content="Left tooltip" position="left">
      <byte-button>Left</byte-button>
    </byte-tooltip>
  </div>

Rich Content

Tooltips can display rich content including keyboard shortcuts and formatting.

Rich Content Tooltips

100%

<div class="flex items-center gap-4">
    <byte-tooltip content="Press ⌘ + K to search">
      <byte-button icon="magnifying-glass">Search</byte-button>
    </byte-tooltip>

    <byte-tooltip content="Status: Online">
      <byte-avatar
        src="https://byteui.dev/assets/andrea-fomera-8411cac6.jpg"
        size="md"
        status="online">
      </byte-avatar>
    </byte-tooltip>
  </div>

Common Use Cases

Icon Buttons

Icon Button Tooltips

100%

<div class="flex items-center gap-4">
    <byte-tooltip content="Add new item">
      <byte-button variant="ghost" icon="plus"></byte-button>
    </byte-tooltip>

    <byte-tooltip content="Delete item">
      <byte-button variant="ghost" color="red" icon="trash"></byte-button>
    </byte-tooltip>

    <byte-tooltip content="Edit settings">
      <byte-button variant="ghost" icon="cog-6-tooth"></byte-button>
    </byte-tooltip>
  </div>

Status Indicators

Status Tooltips

100%

Done

Error

<div class="flex items-center gap-4">
    <byte-tooltip content="Task completed">
      <byte-badge color="green" icon="check-circle">Done</byte-badge>
    </byte-tooltip>

    <byte-tooltip content="Action required">
      <byte-badge color="red" icon="exclamation-circle">Error</byte-badge>
    </byte-tooltip>
  </div>

API Reference

Property

Type

Default

Description

content

string

Text content of the tooltip

position

string

'top'

'top', 'right', 'bottom', 'left'

Best Practices

Keep tooltip content brief and focused
Use tooltips to provide additional context, not essential information
Consider the tooltip position relative to the viewport edges
Ensure tooltip content is accessible via keyboard navigation
Use consistent tooltip styles throughout your application

Pro tip: Tooltips are particularly useful for icon-only buttons where the action might not be immediately clear.