Skip to main content

Adding tooltips

The Tooltip component displays a tooltip when the user hovers over a file or folder. To enable tooltips, wrap <Filemanager> inside <Tooltip> and pass the same api binding to both.

info

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

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

  let api = $state();
</script>

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

Showing tooltips for overflowing text​

Set the overflow prop to show a tooltip only when the file name is too long to fit in its cell and does not fit and is cut off. This avoids redundant tooltips when the full name is already visible.

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

  let api = $state();
</script>

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

Custom tooltip content​

Pass a Svelte component to the content prop to render a custom tooltip body. The component receives api (the Filemanager API instance) and data.file (the hovered file or folder object).

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

  let api = $state();
</script>

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

The custom component (FileTooltip.svelte) receives the following props:

<script>
  let { api, data } = $props();
  // data.file — IParsedEntity object for the hovered file or folder
</script>

<div>
  <strong>{data.file.name}</strong>
  <span>{data.file.size} bytes</span>
</div>

Tooltip placement​

Use the at prop to control where the tooltip appears relative to the hovered element. By default the tooltip follows the cursor ("point").

<Tooltip at="bottom-start" {api}>
  <Filemanager bind:this={api} data={getData()} drive={getDrive()} />
</Tooltip>

Tooltip delay and arrow​

Use delay to change how long the tooltip waits before appearing (in milliseconds, default 300).

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

Set arrow to true to render a pointing arrow on the tooltip popup. Note that arrow has no effect when at="point" (the default). It only works with a fixed placement.

<Tooltip arrow at="bottom" {api}>
  <Filemanager bind:this={api} data={getData()} drive={getDrive()} />
</Tooltip>

Related sample: Tooltips

Related articles: Tooltip API