Skip to main content

content

Description​

Optional. A React component to render as the tooltip body

Usage​

content?: ComponentType | null;

Parameters​

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

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

export default function App() {
  return (
    <Tooltip
      content={UserCard}
      resolver={el => el.dataset.userId ? { id: Number(el.dataset.userId) } : null}
    >
      {users.map(user => (
        <div key={user.id} data-user-id={user.id}>{user.label}</div>
      ))}
    </Tooltip>
  );
}

Related article: Render custom content in a tooltip

Related sample: Tooltip