@stratakit/bricks/dist/Tooltip.d.ts

Small, modular components for StrataKit

import * as React from "react";
import * as AkTooltip from "@ariakit/react/tooltip";
import type { FocusableProps } from "@stratakit/foundations/secret-internals";
interface TooltipProps extends Omit<FocusableProps<"div">, "content">, Pick<AkTooltip.TooltipProps, "open" | "unmountOnHide">, Pick<AkTooltip.TooltipProviderProps, "defaultOpen" | "setOpen" | "placement"> {
    /**
     * The content to be displayed inside the tooltip when the trigger element is hovered or focused.
     */
    content: React.ReactNode;
    /**
     * The element that will trigger the tooltip when hovered or focused.
     * Common examples include buttons, links, or form controls.
     *
     * **Note**: The trigger must be a single interactive element. Do not add a
     * tooltip to a non-interactive static element (such as a `<div>` or `<svg>`). Also,
     * the trigger element must forward its ref and spread its props.
     */
    children: React.ReactElement;
    /**
     * Determines how ARIA attributes are applied to the tooltip for accessibility:
     *
     * - `"description"`: The tooltip provides additional information via `aria-describedby`.
     * - `"label"`: The tooltip acts as a label for the trigger element via `aria-labelledby`.
     * - `"none"`: No ARIA attributes are applied; the tooltip is only for visual assistance.
     *
     * @default "description"
     */
    type?: "description" | "label" | "none";
    /**
     * The placement of the tooltip.
     *
     * When not enough space is available to satisfy the specified placement, the tooltip will
     * automatically flip to the opposite side.
     */
    placement?: AkTooltip.TooltipProviderProps["placement"];
}
/**
 * A tooltip component that provides additional information or context for an interactive trigger element.
 *
 * Example usage:
 *
 * ```tsx
 * <Tooltip content="This is a tooltip">
 *   <button>Hover over me</button>
 * </Tooltip>
 * ```
 *
 * **Note**: The trigger element must be a single interactive element, such as a button or link. Do not add a
 * tooltip to a non-interactive static element (such as a `<div>` or `<svg>`).
 *
 * **Note**: If `type` is set to `"none"`, the tooltip will not use ARIA attributes.
 */
declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
export default Tooltip;