Tooltip

A floating label built on Radix UI Tooltip. Neo-brutalist style: black background, white text, sharp corners.

Import

tsx

import { Tooltip } from 'fxui-core';

Usage

tsx

<Tooltip content="This is a tooltip">
  <Button>Hover me</Button>
</Tooltip>

Placements

tsx

<Tooltip content="Top" placement="top">
  <Button>Top</Button>
</Tooltip>

<Tooltip content="Bottom" placement="bottom">
  <Button>Bottom</Button>
</Tooltip>

<Tooltip content="Left" placement="left">
  <Button>Left</Button>
</Tooltip>

<Tooltip content="Right" placement="right">
  <Button>Right</Button>
</Tooltip>

Delay

tsx

<Tooltip content="Instant" delayDuration={0}>
  <Button>No delay</Button>
</Tooltip>

Rich Content

tsx

<Tooltip content={<span><strong>FXUI</strong> — Neo-brutalist UI</span>}>
  <Button>Rich tooltip</Button>
</Tooltip>

API Reference

| Prop | Type | Default | Description | |------|------|---------|-------------| | content | ReactNode | — | Tooltip content | | placement | 'top' \| 'bottom' \| 'left' \| 'right' | 'top' | Preferred side | | delayDuration | number | 300 | Delay in ms before showing | | children | ReactNode | — | The trigger element |