Tooltip

This component allows you add a small, stylized question mark element that, when hovered over, displays a text box.

The component is built to be accessible in accordance to the guidance from WAI Tooltip Pattern.

The client:load attribute is required for the component to work because it uses Javascript for interactivity.

To use the component, the page must be in .mdx format. 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";

The component can be used within your content in a few ways. Technically, you can add the following in the location you want the question mark element to appear:

<Tooltip content="This appears on hover" client:load></Tooltip>

However, a better practice is to wrap the word or phrase that the tooltip pertains to.

In the following example, the question mark element will appear after the word this.

Define <Tooltip content="Hint text" client:load>this</Tooltip> term.

In this next example, the question mark element will appear between the word to and the ending punctuation.

<Tooltip content="This appears on hover" client:load>
  <a href="/URL">This is the content</a> that the tooltip relates to
</Tooltip>.

Working examples

This is a sentence that has many technical terms. A tooltip 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 .