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 setup>
  import { getData, getDrive } from "./common/data";
  import { Filemanager, Tooltip } from "@svar-ui/vue-filemanager";
  import { ref } from "vue";

  const api = ref();
</script>

<template>
  <Tooltip :api="api">
    <Filemanager ref="api" :data="getData()" :drive="getDrive()" />
  </Tooltip>
</template>

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 setup>
  import { getData, getDrive } from "./common/data";
  import { Filemanager, Tooltip } from "@svar-ui/vue-filemanager";
  import { ref } from "vue";

  const api = ref();
</script>

<template>
  <Tooltip overflow :api="api">
    <Filemanager ref="api" :data="getData()" :drive="getDrive()" />
  </Tooltip>
</template>

Custom tooltip content​

Pass a Vue 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 setup>
  import { getData, getDrive } from "./common/data";
  import { Filemanager, Tooltip } from "@svar-ui/vue-filemanager";
  import FileTooltip from "./FileTooltip.vue";
  import { ref } from "vue";

  const api = ref();
</script>

<template>
  <Tooltip :api="api" :content="FileTooltip">
    <Filemanager ref="api" :data="getData()" :drive="getDrive()" />
  </Tooltip>
</template>

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

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

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

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").

<template>
  <Tooltip at="bottom-start" :api="api">
    <Filemanager ref="api" :data="getData()" :drive="getDrive()" />
  </Tooltip>
</template>

Tooltip delay and arrow​

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

<template>
  <Tooltip :delay="500" :api="api">
    <Filemanager ref="api" :data="getData()" :drive="getDrive()" />
  </Tooltip>
</template>

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.

<template>
  <Tooltip arrow at="bottom" :api="api">
    <Filemanager ref="api" :data="getData()" :drive="getDrive()" />
  </Tooltip>
</template>

Related sample: Tooltips

Related articles: Tooltip API