Tooltip

The Tooltip component provides additional information for an element in a small overlay.

Usage

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

// ...

return (
  <Tooltip.Provider> {/* typically wrapped around the entire app */}
    {/* ... */}
    <Tooltip.Root>
      <Tooltip.Trigger>Hover me</Tooltip.Trigger>
      <Tooltip.Content>
        <p>This is a tooltip</p>
      </Tooltip.Content>
    </Tooltip.Root>
  </Tooltip.Provider>
)

Anatomy

All parts of the Tooltip component can be imported and composed as required.

<Tooltip.Provider>
  <Tooltip.Root>
    <Tooltip.Trigger />
    <Tooltip.Content>
      <Tooltip.Arrow />
    </Tooltip.Content>
  </Tooltip.Root>
</Tooltip.Provider>

API Reference

Provider

The provider component that manages tooltips. Typically wrapped around the entire app.

<Tooltip.Provider
  delayDuration={700}     // [OPTIONAL] delay from when the mouse enters until the tooltip opens
  skipDelayDuration={300} // [OPTIONAL] how much time a user has to enter another trigger without incurring a delay again
  disableHoverableContent // [OPTIONAL] immediately close the tooltip when the mouse leaves the trigger
>
  {/* ... */}
</Tooltip.Provider>

Prop	Required	Default	Type
delayDuration	false	700	number
skipDelayDuration	false	300	number
disableHoverableContent	false	false	boolean

Root

The Root component of a tooltip can be used in both controlled and uncontrolled modes. In uncontrolled mode, you can use the defaultOpen prop to specify the initial open state of the tooltip. In controlled mode, you can manage the open state externally by using the open and onOpenChange props. The open prop allows you to control the open state directly, while the onOpenChange prop is an event handler called whenever the open state changes.

<Tooltip.Root
  defaultOpen             // [OPTIONAL] initial open state
  open                    // [OPTIONAL] controlled open state
  onOpenChange={onChange} // [OPTIONAL] event handler called when the open state changes
  delayDuration={700}     // [OPTIONAL] override default delay duration
  disableHoverableContent // [OPTIONAL] override default setting for disabling hoverable content
>
  {/* ... */}
</Tooltip.Root>

Prop	Required	Default	Type
defaultOpen	false	false	boolean
open	false		boolean
onOpenChange	false		(open: boolean) => void
delayDuration	false		number
disableHoverableContent	false		boolean

Trigger

The button that toggles the tooltip. This component is based on the native button element and supports all of its props.

<Tooltip.Trigger
  asChild           // [OPTIONAL] render the trigger as the child
  className="class" // [OPTIONAL] additional CSS classes
>
  <button>Hover over me</button>
</Tooltip.Trigger>

Prop	Required	Default	Type
asChild	false		boolean
className	false		string

Content

The component that pops out when the tooltip is open.

<Tooltip.Content
  side="top"               // [OPTIONAL] preferred side
  sideOffset={5}           // [OPTIONAL] distance from the trigger
  align="center"           // [OPTIONAL] preferred alignment
  alignOffset={-4}         // [OPTIONAL] offset from the alignment
  avoidCollisions          // [OPTIONAL] avoid collisions
  collisionBoundary={[el]} // [OPTIONAL] boundary to use for collision detection
  collisionPadding={4}     // [OPTIONAL] padding to apply to the collision detection
  sticky="partial"         // [OPTIONAL] sticky behavior
  className="class"        // [OPTIONAL] additional CSS classes
>
  {/* Tooltip content */}
</Tooltip.Content>

Prop	Required	Default	Type
side	false	'top'	'top' | 'right' | 'bottom' | 'left'
sideOffset	false	5	number
align	false	'center'	'start' | 'center' | 'end'
alignOffset	false	-4	number
avoidCollisions	false	true	boolean
collisionBoundary	false		Element | null | Array<Element | null>
collisionPadding	false	4	number
sticky	false	'partial'	'partial' | 'always'
className	false		string