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, Stack } from 'biibaos'

export default function App() {
  return (
    <Stack direction="row" gap={16} align="center" justify="center" fullWidth>
          <Tooltip content="This is an informative tooltip context">
            <Button variant="secondary">Hover me</Button>
          </Tooltip>
        </Stack>
  )
}

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 App() {
  return (
    <Stack direction="row" gap={16} align="center" justify="center" wrap fullWidth>
          <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, Stack, Text, Icon } from 'biibaos'
import { HelpCircle } from 'lucide-react'

export default function App() {
  return (
    <Stack direction="row" gap={12} align="center" justify="center" fullWidth>
          <Text variant="body-sm" color="muted">
            Transaction Fee
          </Text>
          <Tooltip content="Standard card transaction processing fee (1.8%)">
            <div style={{ display: 'inline-flex', 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