melt
Version:
The next generation of Melt UI. Built for Svelte 5.
122 lines (121 loc) • 3.72 kB
TypeScript
import type { MaybeGetter } from "../types";
import { type UseFloatingArgs, type UseFloatingConfig } from "../utils/use-floating.svelte";
export type TooltipProps = {
/**
* If the Tooltip is open.
*
* When passing a getter, it will be used as source of truth,
* meaning that the value only changes when the getter returns a new value.
*
* Otherwise, if passing a static value, it'll serve as the default value.
*
* @default false
*/
open?: MaybeGetter<boolean | undefined>;
/**
* Called when the value is supposed to change.
*/
onOpenChange?: (value: boolean) => void;
/**
* If `true`, tooltip will close if trigger is pressed.
*
* @default true
*/
closeOnPointerDown?: MaybeGetter<boolean | undefined>;
/**
* Tooltip open delay in milliseconds.
*
* @default 1000
*/
openDelay?: MaybeGetter<number | undefined>;
/**
* Tooltip close delay in milliseconds.
*
* @default 0
*/
closeDelay?: MaybeGetter<number | undefined>;
/**
* Config to be passed to `useFloating`
*/
floatingConfig?: UseFloatingArgs["config"];
/**
* If the popover visibility should be controlled by the user.
*
* @default false
*/
forceVisible?: MaybeGetter<boolean | undefined>;
/**
* If `true`, leaving trigger will close the tooltip.
*
* @default false
*/
disableHoverableContent?: MaybeGetter<boolean | undefined>;
};
export declare class Tooltip {
#private;
ids: {
trigger: string;
content: string;
arrow: string;
};
invokerRect: {
x: number;
y: number;
width: number;
height: number;
} | undefined;
closeOnPointerDown: boolean;
openDelay: number;
closeDelay: number;
disableHoverableContent: boolean;
forceVisible: boolean;
floatingConfig: UseFloatingConfig;
/** State */
isVisible: boolean;
get graceAreaPolygon(): {
x: number;
y: number;
}[];
constructor(props?: TooltipProps);
get open(): boolean;
set open(value: boolean);
get trigger(): {
readonly onfocusout: () => Promise<void>;
readonly style: `--melt-invoker-width: ${string}; --melt-invoker-height: ${string}; --melt-invoker-x: ${string}; --melt-invoker-y: ${string}`;
readonly "data-melt-tooltip-trigger": "";
readonly id: string;
readonly "aria-describedby": string;
readonly "data-open": "" | undefined;
readonly onpointerdown: () => void;
readonly onpointerenter: (e: PointerEvent & {
currentTarget: EventTarget & HTMLElement;
}) => void;
readonly onpointermove: () => void;
readonly onpointerleave: (e: PointerEvent & {
currentTarget: EventTarget & HTMLElement;
}) => void;
readonly onfocus: () => void;
readonly onblur: () => void;
};
get content(): {
readonly style: string;
readonly onfocusout: () => Promise<void>;
readonly "data-melt-tooltip-content": "";
readonly id: string;
readonly popover: "manual";
readonly role: "tooltip";
readonly tabindex: -1;
readonly inert: boolean;
readonly "data-open": "" | undefined;
readonly onpointerenter: () => void;
readonly onpointerleave: () => void;
readonly onpointerdown: () => void;
};
get arrow(): {
readonly "data-melt-tooltip-arrow": "";
readonly id: string;
readonly "data-arrow": "";
readonly "aria-hidden": true;
readonly "data-open": "" | undefined;
};
}