Tooltip

Tooltips are triggered on hover. They provide additional information about an element, oftentimes providing context to an icon.

Overview

Resources

Install

yarn add @camp/tooltip

Usage

Placement

There are four placement options available for the tooltip bottom top left and right. By default, the tooltip will have a bottom placement. The tooltip will intelligently place itself to remain on the screen. For example, if a tooltip trigger is at the bottom of a page, the tooltip will appear above its trigger, even if set to bottom.

<Tooltip
    appearance="dark"
    content="I am a tooltip"
    placement="right"
    usePortal
>
    <div><AcGlyphMedium /></div>
</Tooltip>

Appearance

By default, simple tooltips have a dark appearance. However, when a tooltip shows over top of a dark or bright background, the appearance can be set to light.

<Tooltip
    appearance="light"
    content="I am a tooltip"
    placement="right"
    usePortal
>
    <div><InfoCircleMedium /></div>
</Tooltip>

Tooltips with rich content

By default, tooltips have a simple appearance. But for situations with rich content, there is a contentHeavy appearance. contentHeavy tooltips enable explicit actions and more directly within the tooltip.

It can be a good idea to utilize the prop persistOnHover when using a contentHeavy tooltip. It will allow the tooltip to stay open while the user is hovering over the tooltip.

<Tooltip
    appearance="light"
    content={<span className="content-heavy-action">I am some text wow</span>}
    contentHeavy
    placement="top"
    usePortal
>
    <div><AcGlyphMedium /></div>
</Tooltip>

Max width

Sometimes, a tooltip is used to display a long string of text on overflow. By default, the max width of the tooltip is 200px, and the content inside the tooltip will wrap appropriately. For situations where this needs to be overridden, use maxWidth to set a custom max width.

<Tooltip
    maxWidth="600"
    appearance="dark"
    content="I am a very long tooltip. I am useful if there is a long string of text."
    placement="right"
    usePortal
>
    <div><AcGlyphMedium /></div>
</Tooltip>