Tooltip | Park UI

Installation

npx @park-ui/cli@next add tooltip

Add Component

Copy the code snippet below into you components folder.

'use client'
import { Portal } from '@ark-ui/react/portal'
import { Tooltip as ArkTooltip } from '@ark-ui/react/tooltip'
import { type ComponentProps, forwardRef } from 'react'
import { createStyleContext } from 'styled-system/jsx'
import { tooltip } from 'styled-system/recipes'

const { withRootProvider, withContext } = createStyleContext(tooltip)

type RootProps = ComponentProps<typeof Root>
type ContentProps = ComponentProps<typeof Content>
const Root = withRootProvider(ArkTooltip.Root, {
  defaultProps: { unmountOnExit: true, lazyMount: true },
})
const Arrow = withContext(ArkTooltip.Arrow, 'arrow')
const ArrowTip = withContext(ArkTooltip.ArrowTip, 'arrowTip')
const Content = withContext(ArkTooltip.Content, 'content')
const Positioner = withContext(ArkTooltip.Positioner, 'positioner')
const Trigger = withContext(ArkTooltip.Trigger, 'trigger')

export { TooltipContext as Context } from '@ark-ui/react/tooltip'

export interface TooltipProps extends Omit<RootProps, 'content'> {
  showArrow?: boolean
  portalled?: boolean
  portalRef?: React.RefObject<HTMLElement | null>
  children: React.ReactNode | undefined
  content: React.ReactNode | string
  contentProps?: ContentProps
  disabled?: boolean
}

export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(function Tooltip(props, ref) {
  const {
    showArrow,
    children,
    disabled,
    portalled = true,
    content,
    contentProps,
    portalRef,
    ...rootProps
  } = props

  if (disabled) return children

  return (
    <Root {...rootProps}>
      <Trigger asChild>{children}</Trigger>
      <Portal disabled={!portalled} container={portalRef}>
        <Positioner>
          <Content ref={ref} {...contentProps}>
            {showArrow && (
              <Arrow>
                <ArrowTip />
              </Arrow>
            )}
            {content}
          </Content>
        </Positioner>
      </Portal>
    </Root>
  )
})

Integrate Recipe

Integrate this recipe in to your Panda config.

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

export const tooltip = defineSlotRecipe({
  className: 'tooltip',
  slots: tooltipAnatomy.keys(),
  base: {
    content: {
      '--tooltip-bg': 'colors.gray.12',
      bg: 'var(--tooltip-bg)',
      color: 'gray.1',
      borderRadius: 'l2',
      boxShadow: 'sm',
      fontWeight: 'semibold',
      px: '2',
      py: '1.5',
      textStyle: 'xs',
      maxWidth: 'xs',
      _open: {
        animationStyle: 'scale-fade-in',
        animationDuration: 'fast',
      },
      _closed: {
        animationStyle: 'scale-fade-out',
        animationDuration: 'faster',
      },
    },
    arrow: {
      '--arrow-size': 'sizes.2',
      '--arrow-background': 'var(--tooltip-bg)',
    },
    arrowTip: {
      borderTopWidth: '1px',
      borderInlineStartWidth: '1px',
      borderColor: 'var(--tooltip-bg)',
    },
  },
})

Usage

import { Tooltip } from '@/components/ui'

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

Examples

Arrow

Use the showArrow prop to show an arrow on the tooltip.

Placement

Use the positioning.placement prop to change the position of the tooltip.

Offset

Use the positioning.offset prop to change the offset of the tooltip.

Delay

Use the openDelay and closeDelay prop to change the delay of the tooltip.

Custom Background

Use the --tooltip-bg CSS variable to change the background color of the tooltip.

Controlled

Use the open and onOpenChange prop to control the visibility of the tooltip.

Interactive

Use the interactive prop to keep the tooltip open when interacting with its content.

Disabled

Use the disabled prop to disable the tooltip. When disabled, the tooltip will not be shown.

With Avatar

Here's an example of how to use the Tooltip component with an Avatar component.

With Switch

Here's an example of how to wrap Tooltip around a Switch component.

Switch with tooltip

Props

Root

Prop	Default	Type
`closeDelay`	`500`	`number` The close delay of the tooltip.
`closeOnClick`	`true`	`boolean` Whether the tooltip should close on click
`closeOnEscape`	`true`	`boolean` Whether to close the tooltip when the Escape key is pressed.
`closeOnPointerDown`	`true`	`boolean` Whether to close the tooltip on pointerdown.
`closeOnScroll`	`true`	`boolean` Whether the tooltip should close on scroll
`interactive`	`false`	`boolean` Whether the tooltip's content is interactive. In this mode, the tooltip will remain open when user hovers over the content.
`lazyMount`	`false`	`boolean` Whether to enable lazy mounting
`openDelay`	`1000`	`number` The open delay of the tooltip.
`skipAnimationOnMount`	`false`	`boolean` Whether to allow the initial presence animation.
`unmountOnExit`	`false`	`boolean` Whether to unmount on exit.
`aria-label`		`string` Custom label for the tooltip.
`defaultOpen`		`boolean` The initial open state of the tooltip when rendered. Use when you don't need to control the open state of the tooltip.
`disabled`		`boolean` Whether the tooltip is disabled
`id`		`string` The unique identifier of the machine.
`ids`		`Partial<{ trigger: string; content: string; arrow: string; positioner: string }>` The ids of the elements in the tooltip. Useful for composition.
`immediate`		`boolean` Whether to synchronize the present change immediately or defer it to the next frame
`onExitComplete`		`VoidFunction` Function called when the animation ends in the closed state
`onOpenChange`		`(details: OpenChangeDetails) => void` Function called when the tooltip is opened.
`open`		`boolean` The controlled open state of the tooltip
`positioning`		`PositioningOptions` The user provided options used to position the popover content
`present`		`boolean` Whether the node is present (controlled by the user)