Skip to main content

content

Description​

Optional. A Vue component to render as the tooltip body

Usage​

content?: Component | null;

Parameters​

  • a Vue component; the value returned by resolver is spread as props into this component; null is default

Details​

How the component receives data depends on what the resolver returns:

  • string — component is rendered as <Content data={string} />
  • object — object is spread as props: <Content v-bind="result" />

When content is not set, a string return is displayed as plain text and an object return uses result.data as text.

Example​

App.vue
<script setup>
  import { Tooltip } from "@svar-ui/vue-core";
  import UserCard from "./UserCard.vue";

  const users = [
    { id: 1, label: "Berni Mayou" },
    { id: 2, label: "August Dvorak" },
  ];
</script>

<template>
  <Tooltip
    :content="UserCard"
    :resolver="el => el.dataset.userId ? { id: Number(el.dataset.userId) } : null"
  >
    <div v-for="user in users" :key="user.id" :data-user-id="user.id">{{ user.label }}</div>
  </Tooltip>
</template>

Related article: Render custom content in a tooltip

Related sample: Tooltip