Skip to main content

Tooltip

Description​

A wrapper component that shows tooltips on files and folders in the File Manager cards mode

Tooltip wraps <Filemanager> as its children slot and shares the same api binding. By default, the tooltip shows the file name; pass a custom content component to render richer content.

info

Tooltips are triggered only in the cards mode, on hovering over a file or folder.

Usage​

import { Tooltip } from "@svar-ui/svelte-filemanager";
type TooltipProps = {
    api?: IApi;
    content?: Component<{
        api: IApi;
        data: { file: IParsedEntity };
    }> | null;
    overflow?: boolean;
    at?: TPositionNoFit;
    arrow?: boolean;
    touch?: boolean;
    delay?: number;
    css?: string;
    resolver?: TooltipResolver;
};

Parameters​

  • api — (optional) the Filemanager API object. Required for the default resolver to identify the element under the cursor. Can be omitted only when a custom resolver is provided.

  • content — (optional) a Svelte component rendered inside the tooltip body. Default: null (shows the file name). The component receives two props:

    • api — the Filemanager API instance
    • data — an object describing the hovered element:
      • file: IParsedEntity — the hovered file or directory

  • overflow — (optional) when true, the tooltip appears only if the file-name text is clipped and not fully visible. Default: false.

  • at — (optional) tooltip placement relative to the cursor or target element. Default: "point". Accepted values:

    • "point" — follows the cursor
    • "top", "bottom", "left", "right"
    • "top-start", "top-center", "top-end"
    • "bottom-start", "bottom-center", "bottom-end"
    • "left-start", "left-center", "left-end"
    • "right-start", "right-center", "right-end"

  • arrow — (optional) shows an arrow pointing to the target element. Default: false.

  • touch — (optional) enables tooltips on touch devices. Default: false.

  • delay — (optional) delay in milliseconds before the tooltip appears. Default: 300. The tooltip disappears immediately when the cursor leaves.

  • css — (optional) a CSS class applied to the tooltip element. Use it to override default CSS variables.

  • resolver — (optional) a custom function that receives the hovered DOM element and the pointer event, and returns the data object passed to content. Replaces the default resolver.

Example​

<script>
    import { getData, getDrive } from "../data";
    import { Filemanager, Tooltip } from "@svar-ui/svelte-filemanager";

    let api = $state();
    const data = getData();
    data.push({
        id: "/Hover me for tooltip. Visible for entries with overflow.txt",
        size: 1025,
        date: new Date(2023, 11, 1, 14, 45),
        type: "file",
    });
</script>

<Tooltip overflow {api}>
    <Filemanager bind:this={api} {data} drive={getDrive()} />
</Tooltip>

Related articles: Adding tooltips