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 ref to both.

info

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

import { useRef } from "react";
import { getData, getDrive } from "./common/data";
import { Filemanager, Tooltip } from "@svar-ui/react-filemanager";

const api = useRef(null);

<Tooltip api={api}>
  <Filemanager ref={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.

import { useRef } from "react";
import { getData, getDrive } from "./common/data";
import { Filemanager, Tooltip } from "@svar-ui/react-filemanager";

const api = useRef(null);

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

Custom tooltip content​

Pass a React 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).

import { useRef } from "react";
import { getData, getDrive } from "./common/data";
import { Filemanager, Tooltip } from "@svar-ui/react-filemanager";
import FileTooltip from "./FileTooltip.jsx";

const api = useRef(null);

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

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

function FileTooltip({ api, data }) {
  // data.file — IParsedEntity object for the hovered file or folder
  return (
    <div>
      <strong>{data.file.name}</strong>
      <span>{data.file.size} bytes</span>
    </div>
  );
}

export default FileTooltip;

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={api}>
  <Filemanager ref={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={api}>
  <Filemanager ref={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={api}>
  <Filemanager ref={api} data={getData()} drive={getDrive()} />
</Tooltip>

Related sample: Tooltips

Related articles: Tooltip API