XiodUI
HomeDocs
OverviewComponentsStyling & CustomizationChangelog

Components

  • Accordion
  • Agent Steps
  • Alert
  • Alert Dialog
  • Aspect Ratio
  • Autocomplete
  • Avatar
  • Badge
  • Breadcrumb
  • Button
  • Button Group
  • Button Split
  • Calendar
  • Card
  • Carousel
  • Checkbox
  • Circular Progress
  • Collapsible
  • Color Picker
  • Combobox
  • Command
  • Context Menu
  • Copy To Clipboard
  • Corner Badge
  • Dashboard Grid
  • Date Picker
  • Dialog
  • Dot Matrix
  • Draggable
    Updated
  • Drawer
  • Empty
  • Field
  • Fieldset
  • File Upload
    Updated
  • Form
  • Frame
  • Gauge
  • Grid
  • Group
  • Input
  • Input Group
  • Input OTP
  • Input Payment
  • Input Phone
    Updated
  • Input Sensitive
  • Kbd
  • Kinetic Click
  • Label
  • List Box
    Updated
  • Loader
  • Marker
  • Menu
  • Menubar
  • Message
  • Meter
  • Morphic Toast
  • Navigation Menu
  • Number Field
  • Option Picker
  • Orb
  • Pagination
  • Popover
  • Preview Card
    Updated
  • Progress
  • Radio
  • Resizable
  • Ruler Picker
  • Scroll Area
  • Scroll Bar
  • Select
  • Separator
  • Sidebar
  • Skeleton
  • Slider
  • Sortable
  • Switch
  • Table
  • Tabs
  • Text
  • Textarea
  • Timeline
  • Toast
  • Toggle
  • Toggle Group
  • Toolbar
  • Tooltip
  • Waveform
  • Wheel Picker

Loading...

Preview Skeleton

Installation Skeleton

Usage Skeleton

API Reference Skeleton

Sponsors

Support the development of XiodUI and help us build the best component library on Earth.

+++
Sponsor on GitHub

Tooltip

Previous: ToolbarNext: Waveform

A short label that appears when an element is hovered or focused.

Preview

Loading Preview...

Installation

bun add xiod-ui

Usage

Imports

1import {2  Tooltip,3  TooltipArrow,4  TooltipPopup,5  TooltipProvider,6  TooltipTrigger,7  TooltipCreateHandle8} from "xiod-ui/tooltip";

Anatomy

1<Tooltip>2  <TooltipTrigger />3  <TooltipPopup />4</Tooltip>

API Reference

Detailed documentation of properties and options.

Tooltip

PropTypeDefaultDescription
actionsRef
RefObject<TooltipRootActions | null>
–

A ref to imperative actions.

  • unmount: Ends the closing phase of the tooltip after an externally controlled closing animation finishes.

Call preventUnmountOnClose() in onOpenChange first, otherwise the tooltip completes closing on its own. Whether it leaves the DOM is decided by keepMounted on the portal.

  • close: Closes the tooltip imperatively when called.
children
ReactNode | PayloadChildRenderFunction<Payload>
–

The content of the tooltip. This can be a regular React node or a render function that receives the payload

TooltipArrow

Accepts className, style and render, plus every native attribute of the element it renders.

TooltipPopup

Accepts className, style and render, plus every native attribute of the element it renders.

PropTypeDefaultDescription
align
"center"|"start"|"end"
center

How the calendar lines up with the trigger along that side.

anchor

TooltipProvider

PropTypeDefaultDescription
children
ReactNode
–

The content of the component.

closeDelay
number
–

How long to wait before closing a tooltip. Specified in milliseconds.

delay

TooltipTrigger

Accepts className, style and render, plus every native attribute of the element it renders.

PropTypeDefaultDescription
closeDelay
number
0

How long to wait before closing the tooltip. Specified in milliseconds.

closeOnClick
boolean

Helpers

TooltipCreateHandle is called, not rendered. It creates a handle: pass it as handle to a trigger and to the root, and the trigger can sit anywhere in the tree, outside the root.

ToolbarWaveform
of the active trigger.
defaultOpen
boolean
false

Whether the tooltip is initially open.

To render a controlled tooltip, use the open prop instead.

defaultTriggerId
string|null
–

ID of the trigger that the tooltip is associated with. This is useful in conjunction with the defaultOpen prop to create an initially open tooltip.

disabled
boolean
false

Whether the tooltip is disabled.

disableHoverablePopup
boolean
false

Whether the tooltip contents can be hovered without closing the tooltip.

handle
TooltipHandle<Payload>
–

A handle to associate the tooltip with a trigger. If specified, allows external triggers to control the tooltip's open state. Can be created with the Tooltip.createHandle() method.

onOpenChange
((open: boolean, eventDetails: TooltipRootChangeEventDetails) => void)
–

Event handler called when the tooltip is opened or closed.

onOpenChangeComplete
((open: boolean) => void)
–

Event handler called after any animations complete when the tooltip is opened or closed.

open
boolean
–

Whether the tooltip is currently open.

trackCursorAxis
"none"|"both"|"x"|"y"
'none'

Determines which axis the tooltip should track the cursor on.

triggerId
string|null
–

ID of the trigger that the tooltip is associated with. This is useful in conjunction with the open prop to create a controlled tooltip. There's no need to specify this prop when the tooltip is uncontrolled (that is, when the open prop is not set).

Tooltip$1.Positioner.Props["anchor"]
–

An element to position the popup against. Defaults to the trigger.

hideArrow
boolean
false

Whether to hide the arrow that points at the trigger.

side
"top"|"bottom"|"left"|"right"|"inline-end"|"inline-start"
top

Which side of the copy button the tooltip and toast open on.

sideOffset
number|OffsetFunction
10

The gap between the trigger and the calendar, in pixels.

number
–

How long to wait before opening the tooltip on hover. Specified in milliseconds.

timeout
number
400

Another tooltip will open instantly if the previous tooltip is closed within this timeout. Specified in milliseconds.

true

Whether the tooltip should close when this trigger is clicked.

delay
number
600

How long to wait before opening the tooltip on hover. Specified in milliseconds.

disabled
boolean
false

If true, the tooltip will not open when interacting with this trigger. Note that this doesn't apply the disabled attribute to the trigger element. If you want to disable the trigger element itself, you can pass the disabled prop to the trigger element via the render prop.

handle
TooltipHandle<unknown>
–

A handle to associate the trigger with a tooltip.

payload
unknown
–

A payload to pass to the tooltip when it is opened.