Tooltip

Tooltips appear after a short delay when hovering, and immediately when the element receives focus. Once a tooltip has been shown, subsequent tooltips appear without delay.

Installation

npm install --save @godaddy/antares

Props

NameTypeDefault

children?ReactNode—

The content to display inside the tooltip.

placement?Placement | undefined'top'

The placement of the tooltip relative to the trigger.

hideArrow?boolean | undefined—

Whether to hide the arrow.

triggerRef?RefObject<Element | null> | undefined—

The ref for the element which the tooltip positions itself with respect to. When used within `TooltipTrigger` component, this is set automatically.

className?ClassNameOrFunction<TooltipRenderProps> | undefined'react-aria-Tooltip'

The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.

isEntering?boolean | undefined—

Whether the tooltip is currently performing an entry animation.

isExiting?boolean | undefined—

Whether the tooltip is currently performing an exit animation.

UNSTABLE_portalContainer?Element | undefineddocument.body

The container element in which the overlay portal will be placed. This may have unknown behavior depending on where it is portalled to.

containerPadding?number | undefined12

The placement padding that should be applied between the element and its surrounding container.

offset?number | undefined0

The additional offset applied along the main axis between the element and its anchor element.

crossOffset?number | undefined0

The additional offset applied along the cross axis between the element and its anchor element.

shouldFlip?boolean | undefinedtrue

Whether the element should flip its orientation (e.g. top to bottom or left to right) when there is insufficient room for it to render completely.

isOpen?boolean | undefined—

Whether the element is rendered.

arrowBoundaryOffset?number | undefined0

The minimum distance the arrow's edge should be from the edge of the overlay element.

defaultOpen?boolean | undefined—

Whether the overlay is open by default (uncontrolled).

onOpenChange?((isOpen: boolean) => void) | undefined—

Handler that is called when the overlay's open state changes.

style?StyleOrFunction<TooltipRenderProps> | undefined—

The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.

render?DOMRenderFunction<"div", TooltipRenderProps> | undefined—

Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: - You must render the expected element type (e.g. if `<button>` is expected, you cannot render an `<a>`). - Only a single root DOM element can be rendered (no fragments). - You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.

Examples

Basic Usage

Use it with <TooltipTrigger>, which wraps both the tooltip content and a focusable element (for example, a Button). The tooltip appears on hover and focus.

import { Tooltip, TooltipTrigger, Button, type TooltipTriggerProps, type TooltipProps } from '@godaddy/antares';export function DefaultExample(props: {  tooltipTriggerProps?: Partial<TooltipTriggerProps>;  tooltipProps?: Partial<TooltipProps>;}) {  return (    <TooltipTrigger {...props.tooltipTriggerProps}>      <Button variant="primary">Hover me</Button>      <Tooltip {...props.tooltipProps}>This is the tooltip content!</Tooltip>    </TooltipTrigger>  );}

Custom Anchor

To position a tooltip relative to a different focusable element, use the triggerRef prop. The TooltipTrigger still handles showing/hiding on hover/focus.

Tooltip appears here

import { Tooltip, TooltipTrigger, Box, Flex, Button } from '@godaddy/antares';import { useRef } from 'react';export function CustomAnchorExample() {  const triggerRef = useRef<HTMLDivElement>(null);  return (    <Flex gap="sm" alignItems="center">      <TooltipTrigger>        <Button variant="primary">Hover me</Button>        <Tooltip triggerRef={triggerRef}>Tooltip positioned relative to the box</Tooltip>      </TooltipTrigger>      <Box elevation="card" padding="sm" ref={triggerRef}>        Tooltip appears here      </Box>    </Flex>  );}

Accessibility

Keyboard

Key	Description
Tab	Moves focus to the focusable element and shows the tooltip
Escape	Closes the tooltip

ARIA

The tooltip uses role="tooltip" and is associated with its focusable element via aria-describedby.

Best Practices

Keep tooltip content short and informative.
Tooltips are not shown on touch screen interactions. Ensure your UI is usable without tooltips.
Do not place interactive content inside tooltips. Use a Popover instead.

Tooltip

On this page