Tooltip

The Tooltip component displays additional information when users hover over or focus on elements, providing contextual help and explanations without cluttering the interface.

Usage

import {
    Tooltip,
    TooltipSide,
    TooltipAlign,
    TooltipSize,
    TooltipSlotDirection,
} from 'blend-v1'

function MyComponent() {
    return (
        <Tooltip
            content="This is a helpful tooltip"
            side={TooltipSide.TOP}
            align={TooltipAlign.CENTER}
            size={TooltipSize.SMALL}
            showArrow={true}
            delayDuration={300}
        >
            <button>Hover me</button>
        </Tooltip>
    )
}

API Reference

Features

• Multiple positioning options (top, right, bottom, left)
• Flexible alignment (start, center, end)
• Two size variants (small, large)
• Optional arrow indicator
• Icon slot support with left/right positioning
• Configurable delay and offset
• Controlled and uncontrolled modes
• Accessible by default
• Customizable styling through tokens

Usage Examples

Basic Tooltip

Simple tooltip with text content

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

Tooltip with Different Positions

Tooltips can be positioned on different sides of the trigger element

<Tooltip content="Top tooltip" side={TooltipSide.TOP}>
  <button>Top</button>
</Tooltip>

<Tooltip content="Right tooltip" side={TooltipSide.RIGHT}>
  <button>Right</button>
</Tooltip>

<Tooltip content="Bottom tooltip" side={TooltipSide.BOTTOM}>
  <button>Bottom</button>
</Tooltip>

<Tooltip content="Left tooltip" side={TooltipSide.LEFT}>
  <button>Left</button>
</Tooltip>

Tooltip with Icon Slot

Tooltip with an icon displayed alongside the content

<Tooltip
  content="Tooltip with icon"
  slot={<span>⚠️</span>}
  slotDirection={TooltipSlotDirection.LEFT}
>
  <button>With Icon</button>
</Tooltip>

<Tooltip
  content="Tooltip with icon on right"
  slot={<span>ℹ️</span>}
  slotDirection={TooltipSlotDirection.RIGHT}
>
  <button>With Icon (Right)</button>
</Tooltip>

Large Tooltip

Tooltip with larger size for more content

<Tooltip
    content="This is a large tooltip with more content to demonstrate the larger size variant"
    size={TooltipSize.LARGE}
>
    <button>Large Tooltip</button>
</Tooltip>

Tooltip without Arrow

Tooltip without the pointing arrow

<Tooltip content="Tooltip without arrow" showArrow={false}>
    <button>No Arrow</button>
</Tooltip>

Controlled Tooltip

Tooltip with controlled visibility state

const [isOpen, setIsOpen] = useState(false)

;<Tooltip content="Controlled tooltip" open={isOpen}>
    <button
        onMouseEnter={() => setIsOpen(true)}
        onMouseLeave={() => setIsOpen(false)}
    >
        Controlled
    </button>
</Tooltip>

Component Tokens

You can style the tooltip component using the following tokens:

export type TooltipSize = 'sm' | 'lg'

export type TooltipTokensType = {
    background: CSSObject['backgroundColor']
    color: CSSObject['color']
    fontWeight: {
        [key in TooltipSize]: CSSObject['fontWeight']
    }
    borderRadius: {
        [key in TooltipSize]: CSSObject['borderRadius']
    }
    maxWidth: {
        [key in TooltipSize]: CSSObject['maxWidth']
    }
    padding: {
        [key in TooltipSize]: CSSObject['padding']
    }
    fontSize: {
        [key in TooltipSize]: VariantType
    }
    gap: {
        [key in TooltipSize]: CSSObject['gap']
    }
}

Enums

TooltipSide

enum TooltipSide {
    TOP = 'top',
    RIGHT = 'right',
    LEFT = 'left',
    BOTTOM = 'bottom',
}

TooltipAlign

enum TooltipAlign {
    START = 'start',
    END = 'end',
    CENTER = 'center',
}

TooltipSize

enum TooltipSize {
    SMALL = 'sm',
    LARGE = 'lg',
}

TooltipSlotDirection

enum TooltipSlotDirection {
    LEFT = 'left',
    RIGHT = 'right',
}