Skip to main content

content

Description​

Optional. A Svelte component to render as the tooltip body

Usage​

content?: Component | null;

Parameters​

  • a Svelte 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 {...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.svelte
<script>
  import { Tooltip } from "@svar-ui/svelte-core";
  import UserCard from "./UserCard.svelte";

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

<Tooltip
  content={UserCard}
  resolver={el => el.dataset.userId ? { id: Number(el.dataset.userId) } : null}
>
  {#each users as user}
    <div data-user-id={user.id}>{user.label}</div>
  {/each}
</Tooltip>

Related article: Render custom content in a tooltip

Related sample: Tooltip