Dialog with Tooltip

Render a Dialog with a Tooltip that shows upon hovering over the Dialog Trigger.

import { Dialog } from '@ark-ui/react/dialog'
import { Portal } from '@ark-ui/react/portal'
import { Tooltip } from '@ark-ui/react/tooltip'
import { useId } from 'react'

export const Example = () => {
  const trigger = useId()

  return (
    <Dialog.Root ids={{ trigger }}>
      <Tooltip.Root ids={{ trigger }}>
        <Dialog.Trigger asChild>
          <Tooltip.Trigger>Hover me</Tooltip.Trigger>
        </Dialog.Trigger>
        <Portal>
          <Tooltip.Positioner>
            <Tooltip.Content>I am a tooltip!</Tooltip.Content>
          </Tooltip.Positioner>
        </Portal>
      </Tooltip.Root>
      <Portal>
        <Dialog.Backdrop />
        <Dialog.Positioner>
          <Dialog.Content>
            <Dialog.Title>Dialog Title</Dialog.Title>
            <Dialog.Description>Dialog Description</Dialog.Description>
            <Tooltip.Root>
              <Tooltip.Trigger>Hover Me</Tooltip.Trigger>
              <Portal>
                <Tooltip.Positioner>
                  <Tooltip.Content>I am a tooltip!</Tooltip.Content>
                </Tooltip.Positioner>
              </Portal>
            </Tooltip.Root>
            <Dialog.CloseTrigger>Close</Dialog.CloseTrigger>
          </Dialog.Content>
        </Dialog.Positioner>
      </Portal>
    </Dialog.Root>
  )
}

Components in this Example

Dialog

A modal window that appears on top of the main content.

Tooltip

A label that provides information on hover or focus.

Related Examples

Command Menu

Render a Command Palette that opens when CMD + K is pressed.

Popover with Tooltip

Render a Popover with a Tooltip that shows upon hovering over the Popover Trigger.

Slider with Tooltip

Render a Slider with a Tooltip that shows the current value of the Slider.

Tooltip with following cursor

Render a Tooltip that follows the cursor when hovering over the target element.