Overlays

Tooltip

Popup helper text triggered on hover/focus (desktop) or touch/haptics (mobile).

Basic Tooltip

Standard tooltip that pops up above the target element on hover/focus (desktop) or tap (mobile).

'use client'

import React from 'react'
import { Tooltip, Button } from 'biibaos'

export default function TooltipDemo() {
  return (
    <Tooltip content="This is an informative tooltip context">
      <Button variant="secondary">Hover me</Button>
    </Tooltip>
  )
}

Placements

Tooltips can be positioned relative to their target in four directions: top, bottom, left, or right.

'use client'

import React from 'react'
import { Tooltip, Button, Stack } from 'biibaos'

export default function TooltipPlacementsDemo() {
  return (
    <Stack direction="row" gap={16} wrap>
      <Tooltip content="Top placement tooltip" placement="top">
        <Button variant="secondary">Top</Button>
      </Tooltip>
      <Tooltip content="Bottom placement tooltip" placement="bottom">
        <Button variant="secondary">Bottom</Button>
      </Tooltip>
      <Tooltip content="Left placement tooltip" placement="left">
        <Button variant="secondary">Left</Button>
      </Tooltip>
      <Tooltip content="Right placement tooltip" placement="right">
        <Button variant="secondary">Right</Button>
      </Tooltip>
    </Stack>
  )
}

Icon Anchor

Tooltips can be bound directly to icons and small display triggers to provide helpful in-line tips.

Transaction Fee

'use client'

import React from 'react'
import { Tooltip, Text, Icon, Stack } from 'biibaos'
import { HelpCircle } from 'lucide-react'

export default function TooltipIconDemo() {
  return (
    <Stack direction="row" gap={12} align="center">
      <Text variant="body-sm" color="muted">Transaction Fee</Text>
      <Tooltip content="Standard card transaction processing fee (1.8%)">
        <div style={{ cursor: 'pointer', color: 'var(--biiba-primary)' }}>
          <Icon icon={HelpCircle} size={16} />
        </div>
      </Tooltip>
    </Stack>
  )
}

Properties

Prop	Type	Default	Description
`content`	`React.ReactNode`	—	The popup context body of the tooltip
`children`	`React.ReactElement`	—	The target element acting as the anchor trigger
`placement`	`'top' \| 'bottom' \| 'left' \| 'right'`	'top'	Strategic alignment direction of the popup
`delay`	`number`	200	Timing delay in milliseconds before the tooltip enters the screen

Bottom Bar

Timeline