Components
Tooltip

Tooltip

The Tooltip is a flexible and handy component that provides additional information when users hover over an element. It is perfect for scenarios where you need to offer users tips or help text.

UsageTypes

Usage

Start by importing the necessary components from the package:

import {
  Portal,
  Tooltip,
  TooltipArrow,
  TooltipArrowTip,
  TooltipContent,
  TooltipPositioner,
  TooltipPresence,
  TooltipTrigger,
} from '@ark-ui/react'

Here is a basic example:

import { Portal } from '@zag-js/react'
import { useState } from 'react'
import {
  Tooltip,
  TooltipArrow,
  TooltipArrowTip,
  TooltipContent,
  TooltipPositioner,
  TooltipTrigger,
} from '@ark-ui/react'

const Basic = () => (
  <Tooltip>
    <TooltipTrigger>Hover Me</TooltipTrigger>
    <Portal>
      <TooltipPositioner>
        <TooltipContent>I am a tooltip!</TooltipContent>
      </TooltipPositioner>
    </Portal>
  </Tooltip>
)

Using a Render Function

For more control over the Tooltip’s functionality, you can use a function as a child, which provides access to the Tooltip API:

import { Portal } from '@zag-js/react'
import { useState } from 'react'
import {
  Tooltip,
  TooltipArrow,
  TooltipArrowTip,
  TooltipContent,
  TooltipPositioner,
  TooltipTrigger,
} from '@ark-ui/react'

const RenderFn = () => (
  <Tooltip>
    {({ isOpen }) => (
      <>
        <TooltipTrigger>Hover Me</TooltipTrigger>
        <Portal>
          <TooltipPositioner>
            <TooltipContent>This tooltip is open: {isOpen.toString()}</TooltipContent>
          </TooltipPositioner>
        </Portal>
      </>
    )}
  </Tooltip>
)

Controlled Tooltip

To create a controlled Tooltip component, manage the state of whether the tooltip is open using the open prop:

import { Portal } from '@zag-js/react'
import { useState } from 'react'
import {
  Tooltip,
  TooltipArrow,
  TooltipArrowTip,
  TooltipContent,
  TooltipPositioner,
  TooltipTrigger,
} from '@ark-ui/react'

const Controlled = () => {
  const [isOpen, setIsOpen] = useState(false)
  return (
    <>
      <button onClick={() => setIsOpen(!isOpen)}>Toggle</button>
      <Tooltip open={isOpen}>
        <TooltipTrigger>Hover Me</TooltipTrigger>
        <Portal>
          <TooltipPositioner>
            <TooltipContent>I am a tooltip!</TooltipContent>
          </TooltipPositioner>
        </Portal>
      </Tooltip>
    </>
  )
}

Adding an Arrow

To display an arrow pointing to the trigger from the tooltip, use the TooltipArrow and TooltipArrowTip components:

import { Portal } from '@zag-js/react'
import { useState } from 'react'
import {
  Tooltip,
  TooltipArrow,
  TooltipArrowTip,
  TooltipContent,
  TooltipPositioner,
  TooltipTrigger,
} from '@ark-ui/react'

const Arrow = () => (
  <Tooltip>
    <TooltipTrigger>Hove Me</TooltipTrigger>
    <Portal>
      <TooltipPositioner>
        <TooltipContent>
          <TooltipArrow>
            <TooltipArrowTip />
          </TooltipArrow>
          I am a tooltip!
        </TooltipContent>
      </TooltipPositioner>
    </Portal>
  </Tooltip>
)

Configuring Delay Timings

To configure the delay timings for the Tooltip, use the closeDelay and openDelay props:

import { Portal } from '@zag-js/react'
import { useState } from 'react'
import {
  Tooltip,
  TooltipArrow,
  TooltipArrowTip,
  TooltipContent,
  TooltipPositioner,
  TooltipTrigger,
} from '@ark-ui/react'

const Timings = () => (
  <Tooltip closeDelay={0} openDelay={0}>
    <TooltipTrigger>Hover Me</TooltipTrigger>
    <Portal>
      <TooltipPositioner>
        <TooltipContent>I am a tooltip!</TooltipContent>
      </TooltipPositioner>
    </Portal>
  </Tooltip>
)

Custom Positioning

To customize the position of the Tooltip relative to the trigger, use the positioning prop:

import { Portal } from '@zag-js/react'
import { useState } from 'react'
import {
  Tooltip,
  TooltipArrow,
  TooltipArrowTip,
  TooltipContent,
  TooltipPositioner,
  TooltipTrigger,
} from '@ark-ui/react'

const Positioning = () => (
  <Tooltip
    positioning={{ placement: 'left-start', gutter: 16, offset: { mainAxis: 12, crossAxis: 12 } }}
  >
    <TooltipTrigger>Hover Me</TooltipTrigger>
    <Portal>
      <TooltipPositioner>
        <TooltipContent>I am a tooltip!</TooltipContent>
      </TooltipPositioner>
    </Portal>
  </Tooltip>
)

Conclusion

The Tooltip component offers an effective way to present additional information to users in a sleek and unobtrusive manner. Its wide range of configuration options ensure that it can adapt to any UI design or user interaction needs.

Previous

Toggle Group

On This Page

UsageUsing a Render FunctionControlled TooltipAdding an ArrowConfiguring Delay TimingsCustom PositioningConclusion