Components
Tooltip

Tooltip

A label that provides information on hover or focus.

Usage

import * as Tooltip from '~/components/ui/tooltip'

export const Demo = (props: Tooltip.RootProps) => (
  <Tooltip.Root {...props}>
    <Tooltip.Trigger>Hover Me</Tooltip.Trigger>
    <Tooltip.Positioner>
      <Tooltip.Arrow>
        <Tooltip.ArrowTip />
      </Tooltip.Arrow>
      <Tooltip.Content>I am a Tooltip!</Tooltip.Content>
    </Tooltip.Positioner>
  </Tooltip.Root>
)

Installation

1

Add Component

Insert code snippet into your project. Update import paths as needed.

import { Tooltip } from '@ark-ui/react/tooltip'
import type { ComponentProps } from 'react'
import { styled } from 'styled-system/jsx'
import { tooltip } from 'styled-system/recipes'
import { createStyleContext } from '~/lib/create-style-context'

const { withProvider, withContext } = createStyleContext(tooltip)

export const Root = withProvider(Tooltip.Root)
export const Arrow = withContext(styled(Tooltip.Arrow), 'arrow')
export const ArrowTip = withContext(styled(Tooltip.ArrowTip), 'arrowTip')
export const Content = withContext(styled(Tooltip.Content), 'content')
export const Positioner = withContext(styled(Tooltip.Positioner), 'positioner')
export const Trigger = withContext(styled(Tooltip.Trigger), 'trigger')

export interface RootProps extends ComponentProps<typeof Root> {}
export interface ArrowProps extends ComponentProps<typeof Arrow> {}
export interface ArrowTipProps extends ComponentProps<typeof ArrowTip> {}
export interface ContentProps extends ComponentProps<typeof Content> {}
export interface PositionerProps extends ComponentProps<typeof Positioner> {}
export interface TriggerProps extends ComponentProps<typeof Trigger> {}
2

Add Recipe

This step is necessary only if you do not use any of the Park UI plugins.

import { tooltipAnatomy } from '@ark-ui/anatomy'
import { defineSlotRecipe } from '@pandacss/dev'

export const tooltip = defineSlotRecipe({
  className: 'tooltip',
  slots: tooltipAnatomy.keys(),
  base: {
    content: {
      background: 'gray.a12',
      borderRadius: 'l2',
      boxShadow: 'sm',
      color: 'bg.default',
      fontWeight: 'semibold',
      px: '3',
      py: '2',
      textStyle: 'xs',
      maxWidth: '2xs',
      _open: {
        animation: 'fadeIn 0.25s ease-out',
      },
      _closed: {
        animation: 'fadeOut 0.2s ease-out',
      },
    },
  },
})

On this page