Skip to content
GitHub

Tooltip

Use the Tooltip component for adding a short explanation to specific terms. This component is built to be accessible in accordance to the guidance from WAI Tooltip Pattern. Note that the client:load attribute is required for the functionality to work because this component uses Javascript for interactivity.

To use it, your docs page must be in .mdx format. Please change the format from .md to .mdx if necessary. All your existing markdown will still be supported without issue.

Usage

Import the Tooltip component like so:

import { Tooltip } from "@interledger/docs-design-system";

Use the <Tooltip> component within your content like so:

<Tooltip
content="Content to display in the tooltip upon interaction"
client:load
>
<span>Text that you are trying to explain.</span>
</Tooltip>

To link a word or phrase that has an associated tooltip, add the link within the <Tooltip> like so:

<Tooltip
content="Content to display in the tooltip upon interaction"
client:load
>
<a href="/URL">Text that you are trying to explain</a>
</Tooltip>

Working examples

Simple tooltip

This is a sentence that has many technical terms. A tooltip Concise and clear explanation here could help with explaining a term when hovered over. Don’t make them too long though.

This example contains a tooltip along with a link to see Bubees Bubees is not a typo. Bubees is a cat. .