For AI agents: the complete documentation index is available at https://wallarm.github.io/design-system/llms.txt, the full documentation bundle is available at https://wallarm.github.io/design-system/llms-full.txt, and this page is available as Markdown at https://wallarm.github.io/design-system/components/tooltip.md.
Design System

    Tooltip

    A short label on hover or focus, for naming something the interface cannot afford to spell out — an icon button, a truncated value. It holds no interactive content and cannot be reached by keyboard beyond its trigger, so anything the reader needs to click belongs in a Popover.

    Source · Storybook

    Usage

    import { Button } from '@wallarm-org/design-system/Button';
import { ChevronRight } from '@wallarm-org/design-system/icons';
import { Tooltip, TooltipContent, TooltipTrigger } from '@wallarm-org/design-system/Tooltip';

    Examples

    With description

    A second line for a consequence rather than a name. This is the ceiling — past it, the content wants a Popover.

    With nested dialog

    A tooltip on a trigger that also opens a dialog, checking the tooltip dismisses rather than hanging over the panel.

    With kbd

    A Kbd inside the tooltip, which is the convention for naming a control and its shortcut in one breath.

    Props

    PropTypeDefaultDescription
    openboolean | undefined
    defaultOpenboolean | undefined
    onOpenChange((open: boolean) => void) | undefined
    openDelaynumber | undefined
    closeDelaynumber | undefined
    closeOnPointerDownboolean | undefined
    closeOnEscapeboolean | undefined
    closeOnScrollboolean | undefined
    interactiveboolean | undefined
    disabledboolean | undefined
    positioningPositioningOptions | undefined
    idsElementIds | undefinedOverride the trigger element's id. Pass the same id to another compound component's ids.trigger (e.g. Popover, DropdownMenu) to compose their triggers on one element via nested asChild without an extra wrapper node — otherwise the outer trigger's id wins and this tooltip can't find its anchor, mispositioning at the viewport origin.
    data-testidstring | undefined

    TooltipContent

    PropTypeDefaultDescription
    titlestring | undefined
    defaultCheckedboolean | undefined
    defaultValuestring | number | readonly string[] | undefined
    autoFocusboolean | undefined
    idstring | undefined
    tabIndexnumber | undefined
    relstring | undefined
    onChangeChangeEventHandler<T, Element> | undefined
    asChildboolean | undefinedUse the provided child element as the default rendered element, combining their props and behavior.
    data-testidstring | undefined

    TooltipTrigger

    PropTypeDefaultDescription
    titlestring | undefined
    defaultCheckedboolean | undefined
    defaultValuestring | number | readonly string[] | undefined
    autoFocusboolean | undefined
    idstring | undefined
    tabIndexnumber | undefined
    relstring | undefined
    onChangeChangeEventHandler<T, Element> | undefined
    type"button" | "submit" | "reset" | undefined
    disabledboolean | undefined
    namestring | undefined
    valuestring | undefinedThe value that identifies this specific trigger
    asChildboolean | undefinedUse the provided child element as the default rendered element, combining their props and behavior.
    data-testidstring | undefined

    Explorer