Tooltip

A tooltip component with XSS protection and flexible positioning.

Import

import {
  Tooltip,
  TooltipRoot,
  TooltipTrigger,
  TooltipPopup,
  TooltipArrow,
} from '@bao-ui/react'

Basic Usage

<TooltipRoot>
  <TooltipTrigger>
    <Button>Hover me</Button>
  </TooltipTrigger>
  <TooltipPopup content="This is a tooltip" />
</TooltipRoot>

With Custom Content

<TooltipRoot>
  <TooltipTrigger>
    <Button>Custom tooltip</Button>
  </TooltipTrigger>
  <TooltipPopup>
    <div>
      <strong>Custom Content</strong>
      <p>You can put any React content here.</p>
    </div>
  </TooltipPopup>
</TooltipRoot>

With Arrow

<TooltipRoot>
  <TooltipTrigger>
    <Button>With arrow</Button>
  </TooltipTrigger>
  <TooltipPopup content="Tooltip with arrow">
    <TooltipArrow />
  </TooltipPopup>
</TooltipRoot>

HTML Content (Sanitized)

<TooltipRoot>
  <TooltipTrigger>
    <Button>HTML content</Button>
  </TooltipTrigger>
  <TooltipPopup content="<strong>Bold</strong> and <em>italic</em> text" />
</TooltipRoot>

Components

TooltipRoot

The root container that manages tooltip state.

<TooltipRoot>{/* Tooltip content */}</TooltipRoot>

TooltipTrigger

The element that triggers the tooltip on hover/focus.

<TooltipTrigger>
  <span>Trigger element</span>
</TooltipTrigger>

TooltipPopup

The tooltip content container.

;<TooltipPopup content="Simple text" />
 
{
  /* Or with children */
}
;<TooltipPopup>
  <div>Custom content</div>
</TooltipPopup>

TooltipArrow

Optional arrow pointing to the trigger.

<TooltipArrow className="custom-arrow" />

API Reference

TooltipPopup Props

Prop	Type	Default	Description
`content`	`string`	-	HTML string content (sanitized)
`className`	`string`	-	Additional CSS classes
`children`	`React.ReactNode`	-	Custom React content

TooltipArrow Props

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

Security

The tooltip automatically sanitizes HTML content using DOMPurify to prevent XSS attacks:

// Safe - malicious scripts are removed
<TooltipPopup content="<script>alert('xss')</script>Safe content" />

Accessibility

Shows on hover and focus
Dismisses on Escape key
Proper ARIA labeling
Screen reader compatible
Keyboard navigation support

Dialog Design System