Tooltip
A label that provides information on hover or focus.
Usage
I am a Tooltip!
import { Tooltip } from '~/components/ui'
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
npx @park-ui/cli components add tooltip1
Styled Primitive
Copy the code snippet below into ~/components/ui/primitives/tooltip.tsx
'use client'
import type { Assign } from '@ark-ui/react'
import { Tooltip } from '@ark-ui/react/tooltip'
import { type TooltipVariantProps, tooltip } from 'styled-system/recipes'
import type { ComponentProps, HTMLStyledProps } from 'styled-system/types'
import { createStyleContext } from '~/lib/create-style-context'
const { withRootProvider, withContext } = createStyleContext(tooltip)
export type RootProviderProps = ComponentProps<typeof RootProvider>
export const RootProvider = withRootProvider<
Assign<Tooltip.RootProviderProps, TooltipVariantProps>
>(Tooltip.RootProvider)
export type RootProps = ComponentProps<typeof Root>
export const Root = withRootProvider<Assign<Tooltip.RootProps, TooltipVariantProps>>(Tooltip.Root)
export const Arrow = withContext<
HTMLDivElement,
Assign<HTMLStyledProps<'div'>, Tooltip.ArrowBaseProps>
>(Tooltip.Arrow, 'arrow')
export const ArrowTip = withContext<
HTMLDivElement,
Assign<HTMLStyledProps<'div'>, Tooltip.ArrowTipBaseProps>
>(Tooltip.ArrowTip, 'arrowTip')
export const Content = withContext<
HTMLDivElement,
Assign<HTMLStyledProps<'div'>, Tooltip.ContentBaseProps>
>(Tooltip.Content, 'content')
export const Positioner = withContext<
HTMLDivElement,
Assign<HTMLStyledProps<'div'>, Tooltip.PositionerBaseProps>
>(Tooltip.Positioner, 'positioner')
export const Trigger = withContext<
HTMLButtonElement,
Assign<HTMLStyledProps<'button'>, Tooltip.TriggerBaseProps>
>(Tooltip.Trigger, 'trigger')
export { TooltipContext as Context } from '@ark-ui/react/tooltip'
import { type Assign, Tooltip } from '@ark-ui/solid'
import type { ComponentProps } from 'solid-js'
import { type TooltipVariantProps, tooltip } from 'styled-system/recipes'
import type { HTMLStyledProps } from 'styled-system/types'
import { createStyleContext } from '~/lib/create-style-context'
const { withRootProvider, withContext } = createStyleContext(tooltip)
export type RootProviderProps = ComponentProps<typeof RootProvider>
export const RootProvider = withRootProvider<
Assign<Tooltip.RootProviderProps, TooltipVariantProps>
>(Tooltip.RootProvider)
export type RootProps = ComponentProps<typeof Root>
export const Root = withRootProvider<Assign<Tooltip.RootProps, TooltipVariantProps>>(Tooltip.Root)
export const Arrow = withContext<Assign<HTMLStyledProps<'div'>, Tooltip.ArrowBaseProps>>(
Tooltip.Arrow,
'arrow',
)
export const ArrowTip = withContext<Assign<HTMLStyledProps<'div'>, Tooltip.ArrowTipBaseProps>>(
Tooltip.ArrowTip,
'arrowTip',
)
export const Content = withContext<Assign<HTMLStyledProps<'div'>, Tooltip.ContentBaseProps>>(
Tooltip.Content,
'content',
)
export const Positioner = withContext<Assign<HTMLStyledProps<'div'>, Tooltip.PositionerBaseProps>>(
Tooltip.Positioner,
'positioner',
)
export const Trigger = withContext<Assign<HTMLStyledProps<'button'>, Tooltip.TriggerBaseProps>>(
Tooltip.Trigger,
'trigger',
)
export { TooltipContext as Context } from '@ark-ui/solid'
No snippet foundExtend ~/components/ui/primitives/index.ts with the following line:
export * as Tooltip from './tooltip'2
Integrate Recipe
If you're not using @park-ui/preset, add the following recipe to yourpanda.config.ts:
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',
},
},
},
})