AsheeUI
Tooltip

Tooltip

A floating label that appears on hover or focus to provide additional context about an element.

Import

tsx
import { Tooltip } from "asheeui";

Usage

tsx
import { Button, Tooltip } from "asheeui";


export default function Basic() {
	return (
		<Tooltip content="This is a tooltip">
			<Button>Hover me</Button>
		</Tooltip>
	);
}

Examples

Color

Variant

Size

Radius

Placement

With arrow

Custom delay

Custom offset

Disabled

On icon buttons

On text

User Profile

With custom styling

Props

PropTypeDefaultDescription
contentReactNode—Tooltip content (required)
childrenReactElement | ReactNode—Trigger element (required)
variant"solid" | "ghost" | "bordered" | "faded" | "underlined""solid"*Visual style
color"none" | "default" | "primary" | "secondary" | "danger" | "warning" | "success""secondary"*Semantic color
size"sm" | "md" | "lg""md"*Size scale
placement"top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end""top"*Tooltip position
delaynumber | { open?: number; close?: number }200*Show/hide delay in ms
offsetnumber8*Distance from trigger
radius"none" | "xs" | "sm" | "md" | "lg" | "xl" | "full""md"*Corner rounding
showArrowbooleanfalse*Show arrow indicator
isDisabledbooleanfalseDisable tooltip
classNamestring—Extra classes

* Falls back through Global Configuration if not set — see below.

Global Configuration

Tooltip reads defaults from four places, in this order of precedence:

  1. Instance prop — set directly on <Tooltip />
  2. Component config — components.tooltip in your ashee.config
  3. Theme default — defaultVariant / defaultColor / defaultRadius in your ashee.config
  4. Built-in fallback — component's internal default values

Component config

ts
// ashee.config.ts
import type { ExternalConfig } from "asheeui";


export const config: ExternalConfig = {
  components: {
    tooltip: {
      size: "md",
      placement: "top",
      variant: "solid",
      color: "secondary",
      delay: 200,
      offset: 8,
      radius: "md",
      showArrow: false,
    },
  },
};

Built-in fallbacks

ts
{
  size: "md",
  placement: "top",
  variant: "solid",
  color: "secondary",
  delay: 200,
  offset: 8,
  radius: "md",
  showArrow: false,
  className: "",
}

Accessibility

  • Uses role="tooltip" for proper semantics
  • Trigger element receives proper ARIA attributes
  • Supports keyboard focus with hover and focus interactions
  • Tooltip content is announced by screen readers
  • Pointer events disabled on tooltip to allow mouse interaction with trigger
  • Dismiss on escape and click outside

Notes

  • Children Requirement: The tooltip wraps a single child element that acts as the trigger.
  • Delay: Can be a single number (applies to both open and close) or an object with open and close properties.
  • Placement: The tooltip automatically flips to prevent overflow using Floating UI.
  • Arrow: When showArrow is true, an arrow points from the tooltip to the trigger element.
  • Disabled: The isDisabled prop prevents the tooltip from appearing, useful for conditional tooltips.
  • Floating Portal: Tooltips render in a portal to avoid z-index and overflow issues.
Previous

← Toast