Tooltip

Displays supplementary information when a user hovers over an element.

Usage

Used to reveal supplemental information when a user hovers or focuses on a target element.

import { Tooltip, Portal, Surface, Button } from "@elemnts-ui/react";

<Tooltip.Root>
  <Tooltip.Trigger asChild>
    <Button>Hover me</Button>
  </Tooltip.Trigger>
  <Portal>
    <Tooltip.Positioner>
      <Tooltip.Content asChild>
        <Surface>
          <Surface.Content>Tooltip content</Surface.Content>
        </Surface>
      </Tooltip.Content>
    </Tooltip.Positioner>
  </Portal>
</Tooltip.Root>;

Delay

Set the show and hide delays for the tooltip using the openDelay and closeDelay props.

Interactive

Enable the interactive prop to keep the tooltip open while users interact within its content (for example, links or buttons).

API Reference

Prop	Type	Default
asChild	`boolean`	`false`
aria-label	`string`	-
closeDelay	`number`	`150`
closeOnClick	`boolean`	`true`
closeOnEscape	`boolean`	`true`
closeOnPointerDown	`boolean`	`true`
closeOnScroll	`boolean`	`true`
defaultOpen	`boolean`	-
defaultTriggerValue	`string`	-
disabled	`boolean`	-
hideMode	`HideMode`	`'display-none'`
immediate	`boolean`	-
interactive	`boolean`	`false`
lazyMount	`boolean`	`false`
onExitComplete	`VoidFunction`	-
onOpenChange	`(details: OpenChangeDetails) => void`	-
onTriggerValueChange	`(details: TriggerValueChangeDetails) => void`	-
open	`boolean`	-
openDelay	`number`	`400`
positioning	`PositioningOptions`	-
present	`boolean`	-
skipAnimationOnMount	`boolean`	`false`
triggerValue	`string`	-
unmountOnExit	`boolean`	`false`

TooltipArrow

Prop	Type	Default
asChild	`boolean`	`false`

TooltipArrowTip

Prop	Type	Default
asChild	`boolean`	`false`

TooltipContent

Prop	Type	Default
asChild	`boolean`	`false`

TooltipPositioner

Prop	Type	Default
asChild	`boolean`	`false`

TooltipProvider

Prop	Type	Default
value	`UseTooltipReturn`	required
hideMode	`HideMode`	`'display-none'`
immediate	`boolean`	-
lazyMount	`boolean`	`false`
onExitComplete	`VoidFunction`	-
present	`boolean`	-
skipAnimationOnMount	`boolean`	`false`
unmountOnExit	`boolean`	`false`

TooltipTrigger

Prop	Type	Default
asChild	`boolean`	`false`
value	`string`	-