Tooltip

The Tooltip component displays informative text when users hover over, focus on, or tap an element. It's useful for providing additional context or explanations.

Import

import { Tooltip } from '@lazy-panda-ui/lazy-panda-ui';

Usage

import React from 'react';
import { Tooltip, Button } from '@lazy-panda-ui/lazy-panda-ui';

function MyComponent() {
  return (
    <Tooltip content="This is a helpful tip">
      <Button>Hover me</Button>
    </Tooltip>
  );
}

Props

Name	Type	Default	Description
content	string | ReactNode	-	Content to display in tooltip
placement	'top' | 'bottom' | 'left' | 'right'	'top'	Tooltip placement
delay	number | { show: number, hide: number }	0	Delay in ms before showing/hiding
offset	number	8	Distance from trigger element
arrow	boolean	true	Whether to show arrow
maxWidth	number | string	320	Maximum width of tooltip
disabled	boolean	false	Whether tooltip is disabled
trigger	'hover' | 'focus' | 'click' | 'manual'	'hover'	Event that triggers tooltip
visible	boolean	-	Controlled visibility state
onVisibleChange	(visible: boolean) => void	-	Visibility change handler

Examples

Basic Tooltips

<Stack direction="row" spacing="md">
  <Tooltip content="Basic tooltip">
    <Button>Hover me</Button>
  </Tooltip>

  <Tooltip content="Disabled button tooltip">
    <Button disabled>Disabled</Button>
  </Tooltip>
</Stack>

Placement Options

<Stack spacing="md">
  <Stack direction="row" spacing="md">
    <Tooltip content="Top" placement="top">
      <Button>Top</Button>
    </Tooltip>
    <Tooltip content="Bottom" placement="bottom">
      <Button>Bottom</Button>
    </Tooltip>
  </Stack>
  
  <Stack direction="row" spacing="md">
    <Tooltip content="Left" placement="left">
      <Button>Left</Button>
    </Tooltip>
    <Tooltip content="Right" placement="right">
      <Button>Right</Button>
    </Tooltip>
  </Stack>
</Stack>

With Delay

<Tooltip
  content="Delayed tooltip"
  delay={{ show: 500, hide: 200 }}
>
  <Button>Hover with delay</Button>
</Tooltip>

Rich Content

<Tooltip
  content={
    <Box padding="sm">
      <Text weight="bold">Rich Tooltip</Text>
      <Text size="sm">With multiple lines</Text>
      <Link>Learn more</Link>
    </Box>
  }
>
  <Button>Rich content</Button>
</Tooltip>

Different Triggers

<Stack direction="row" spacing="md">
  <Tooltip
    content="Click to show"
    trigger="click"
  >
    <Button>Click me</Button>
  </Tooltip>

  <Tooltip
    content="Focus to show"
    trigger="focus"
  >
    <Button>Focus me</Button>
  </Tooltip>
</Stack>

Controlled Tooltip

function ControlledTooltip() {
  const [visible, setVisible] = useState(false);

  return (
    <Tooltip
      content="Controlled tooltip"
      visible={visible}
      onVisibleChange={setVisible}
    >
      <Button
        onClick={() => setVisible(!visible)}
      >
        Toggle tooltip
      </Button>
    </Tooltip>
  );
}

Customization

Custom Styling

<Tooltip
  content="Styled tooltip"
  style={{
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    color: 'white',
    borderRadius: '8px',
    padding: '12px',
  }}
  arrow={false}
>
  <Button>Styled</Button>
</Tooltip>

Custom Animation

<Tooltip
  content="Animated tooltip"
  style={{
    transition: 'all 0.3s ease-in-out',
    transform: 'scale(0.95)',
    '&[data-show]': {
      transform: 'scale(1)',
    },
  }}
>
  <Button>Animated</Button>
</Tooltip>

Best Practices

1. Keep content concise and helpful
2. Position tooltips logically
3. Avoid blocking important content
4. Consider mobile interactions
5. Use appropriate delays
6. Maintain readability
7. Don't hide critical information

API Reference

Placement Types

type Placement =
  | 'top'
  | 'top-start'
  | 'top-end'
  | 'bottom'
  | 'bottom-start'
  | 'bottom-end'
  | 'left'
  | 'left-start'
  | 'left-end'
  | 'right'
  | 'right-start'
  | 'right-end';

Theme Customization

const theme = {
  tooltip: {
    background: '#333',
    color: '#fff',
    borderRadius: '4px',
    padding: '8px 12px',
    fontSize: '14px',
    maxWidth: '320px',
    zIndex: 1000,
    arrow: {
      size: 6,
      color: '#333',
    },
  },
};

Accessibility

ARIA Support

<Tooltip
  content="Accessible tooltip"
  aria-label="Additional information"
  role="tooltip"
>
  <Button>Accessible</Button>
</Tooltip>

Related Components

• Popover - For more complex floating content
• Menu - For dropdown menus
• Dialog - For modal dialogs
• Badge - For status indicators