@navikt/ds-react/esm/tooltip/Tooltip.d.ts

React components from the Norwegian Labour and Welfare Administration.

import React, { HTMLAttributes } from "react";
export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
    /**
     * Element tooltip anchors to.
     *
     * Needs to be React.ReactElement, does not support multiple children/react fragment
     */
    children: React.ReactElement & React.RefAttributes<HTMLElement>;
    /**
     * Open state for contolled tooltip
     */
    open?: boolean;
    /**
     * Tells tooltip to start in open state.
     * Use _sparingly_ since hover/focus on other elements will close it.
     *
     * `open`-prop overwrites this.
     */
    defaultOpen?: boolean;
    /**
     * Change handler for open.
     */
    onOpenChange?: (open: boolean) => void;
    /**
     * Orientation for tooltip.
     * @default "top"
     */
    placement?: "top" | "right" | "bottom" | "left";
    /**
     * Toggles rendering of arrow.
     * @default true
     */
    arrow?: boolean;
    /**
     * Distance from anchor to tooltip.
     * @default 10px with arrow, 2px without arrow
     */
    offset?: number;
    /**
     * Text-content inside tooltip.
     */
    content: string;
    /**
     * Sets max character length.
     *
     * Ideally you should keep the length of the tooltip to a minimum (80 characters).
     * Currently this prop only emits a warning in the console, which can be squelched
     * by setting this to a larger number. However, before doing so you should _try_
     * to shorten the content so that it fits into 80 characters.
     * @default 80
     */
    maxChar?: number;
    /**
     * Adds a delay in milliseconds before opening tooltip.
     * @default 150
     */
    delay?: number;
    /**
     * List of Keyboard-keys for shortcuts.
     */
    keys?: string[];
    /**
     * When false, Tooltip labels the element, and child-elements content will be ignored by screen-readers.
     * When true, content is added as additional information to the child element.
     * @default false
     */
    describesChild?: boolean;
}
/**
 * A component that displays a tooltip when the user hovers over its child element.
 *
 * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/tooltip)
 * @see 🏷️ {@link TooltipProps}
 *
 * @example
 * ```jsx Tooltip as only form of labeling
 * <Tooltip content="Skriv ut dokument">
 *   <Button icon={<PrinterLargeIcon aria-hidden />} />
 * </Tooltip>
 * ```
 */
export declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLDivElement>>;
export default Tooltip;