Tooltip

A short label on hover and focus: a pill, with a shortcut when there is one.

View source
import { Tooltip } from "@logicplanes/kaeso-ui";

Props

  • children
    ReactElement<unknown, string | JSXElementConstructor<any>>

    The trigger: a single element that accepts a ref.

  • content
    ReactNode

    What the tooltip says. Keep it to the control's name or one short sentence.

  • defaultOpen
    boolean

    Whether it starts open, when the component keeps its own state.

  • delay
    number

    How long the pointer has to rest before it opens, in milliseconds.

  • disabled
    boolean

    Never shows the tooltip.

  • onOpenChange
    ((open: boolean) => void)

    Called when it opens or closes.

  • open
    boolean

    Whether it is open, when you control it.

  • shape
    "pill" | "multiline"

    A pill for a short label, or a box for several lines.

  • shortcut
    string[] | string[][]

    A shortcut shown after the text: ["mod", "k"] or [["g"], ["m"]].

  • side
    "top" | "bottom" | "left" | "right"

    The side it opens on.

  • sideOffset
    number

    Distance from the trigger in px.