Tooltip

Name: Aki UI
Author: Duy (DuyDev)

A component for displaying additional information on hover or focus.

Import

import { Tooltip } from '@akitectio/aki-ui'

// TypeScript types
import type { TooltipProps } from '@akitectio/aki-ui'

Basic Usage

Hover to see tooltip

import { Tooltip } from '@akitectio/aki-ui'

function BasicTooltip() {
  return (
    <Tooltip content="This is a tooltip">
      <button>Hover me</button>
    </Tooltip>
  )
}

Positioning

Different Positions

// Different placement options
<Tooltip content="Top tooltip" placement="top">
  <button>Top</button>
</Tooltip>

<Tooltip content="Right tooltip" placement="right">
  <button>Right</button>
</Tooltip>

<Tooltip content="Bottom tooltip" placement="bottom">
  <button>Bottom</button>
</Tooltip>

<Tooltip content="Left tooltip" placement="left">
  <button>Left</button>
</Tooltip>

Variants

Different Variants

// Different variant styles
<Tooltip content="Default tooltip" variant="default">
  <button>Default</button>
</Tooltip>

<Tooltip content="Error tooltip" variant="error">
  <button>Error</button>
</Tooltip>

<Tooltip content="Success tooltip" variant="success">
  <button>Success</button>
</Tooltip>

<Tooltip content="Warning tooltip" variant="warning">
  <button>Warning</button>
</Tooltip>

Rich Content

Tooltip with Rich Content

import { InformationCircleIcon } from '@heroicons/react/24/outline'

const richContent = (
  <div className="flex items-start space-x-3 max-w-xs">
    <InformationCircleIcon className="w-5 h-5 text-blue-500 flex-shrink-0 mt-0.5" />
    <div>
      <h4 className="font-medium">Information</h4>
      <p className="text-sm text-gray-600 mt-1">
        This tooltip contains rich content with multiple elements.
      </p>
    </div>
  </div>
)

<Tooltip content={richContent} placement="top">
  <button>Rich Content</button>
</Tooltip>

API Reference

Prop	Type	Default	Description
content	ReactNode	-	Content to display in the tooltip
placement	'top' \| 'right' \| 'bottom' \| 'left'	'top'	Position of the tooltip
variant	'default' \| 'error' \| 'success' \| 'warning'	'default'	Visual style variant
trigger	'hover' \| 'click' \| 'focus'	'hover'	How to trigger the tooltip
delay	number	0	Delay before showing tooltip (ms)
hideDelay	number	0	Delay before hiding tooltip (ms)
disabled	boolean	false	Disable the tooltip
arrow	boolean	true	Show arrow pointing to trigger
offset	number	8	Distance from trigger element

Accessibility

Supports keyboard focus and hover triggers
ARIA attributes for screen readers (aria-describedby)
Properly labeled with role="tooltip"
Respects prefers-reduced-motion for animations
Keyboard navigation support (Escape to close)
Focus management when triggered by keyboard