Animated Tooltip

import { AnimatedTooltip } from '@hanzo/ui'

export function Default() {
  return (
    <XStack items="center" justify="center" p="$8">
      <AnimatedTooltip content="This is a helpful tooltip">
        <Button>Hover me</Button>
      </AnimatedTooltip>
    </XStack>
  )
}

export function LongContent() {
  return (
    <XStack items="center" justify="center" p="$8">
      <AnimatedTooltip content="Tooltips can contain longer descriptions and helpful information">
        <Button variant="outline">More info</Button>
      </AnimatedTooltip>
    </XStack>
  )
}

export function Delayed() {
  return (
    <XStack items="center" justify="center" p="$8">
      <AnimatedTooltip content="Arrives a little later" delay={300}>
        <Button variant="outline">Wait for it</Button>
      </AnimatedTooltip>
    </XStack>
  )
}

export function Row() {
  return (
    <XStack items="center" justify="center" gap="$8" p="$8">
      <AnimatedTooltip content="First">
        <Button size="sm">One</Button>
      </AnimatedTooltip>
      <AnimatedTooltip content="Second">
        <Button size="sm">Two</Button>
      </AnimatedTooltip>
      <AnimatedTooltip content="Third">
        <Button size="sm">Three</Button>
      </AnimatedTooltip>
    </XStack>
  )
}

Types

export type AnimatedTooltipProps = Omit<React.ComponentProps<typeof Frame>, 'content'> & {
  /** What the floating panel shows. */
  content: React.ReactNode
  children: React.ReactNode
  /** Milliseconds to hold before the entrance animation starts. */
  delay?: number
}

Exports