Tooltip

Short hover and focus labels for compact controls.

Demo

Placement

Usage

import { Info } from 'lucide-react'
import { Button, Tooltip } from 'regen-ui'

export function InfoTooltip() {
  return (
    <Tooltip label="Available after your first deposit.">
      <Button.Icon title="Show deposit help">
        <Info />
      </Button.Icon>
    </Tooltip>
  )
}

API Reference

Tooltip.Props

Name	Type	Default	Description
`children`Required	`ReactElement`	None	Element receiving the tooltip, typically a button or icon.
`label`Required	`ReactNode`	None	Tooltip label.
`side`Optional	`'top' \| 'right' \| 'bottom' \| 'left'`	`'top'`	Side of the trigger to anchor the popup.

childrenRequired

TypeReactElement

DefaultNone

Element receiving the tooltip, typically a button or icon.

labelRequired

TypeReactNode

DefaultNone

Tooltip label.

sideOptional

Type'top' | 'right' | 'bottom' | 'left'

Default'top'

Side of the trigger to anchor the popup.