Tooltip

Last updated: 2.0.0 (22/01/2024)

Usage

import { Tooltip, Button } from "@valence-ui/core";

function MyComponent() { 
    return ( 
        <Tooltip>
            <Tooltip.Trigger>
                <Button>
                    I'm a button!
                </Button>
            </Tooltip.Trigger>
            <Tooltip.Content>
                I'm a tooltip!
            </Tooltip.Content>
        </Tooltip>
    )
}

Uncontrolled Tooltips will not show on mobile breakpoints.

Controlled

The Tooltip be used in a controlled fashion using the useDisclosure hook. The Tooltip will automatically hide when clicked away from (i.e. another element is focused), regardless of whether or not it is controlled.

import { Tooltip, Button, useDisclosure } from "@valence-ui/core";

function MyComponent() { 
    const disclosure = useDisclosure(false);

    return ( 
        <Tooltip
            disclosure={disclosure}
        >
            <Tooltip.Trigger>
                <Button
                    onClick={() => disclosure.open()}
                >
                    I'm a button!
                </Button>
            </Tooltip.Trigger>
            <Tooltip.Content>
                I'm a tooltip!
            </Tooltip.Content>
        </Tooltip>
    )
}

Custom content

The Tooltip.Content component accepts any valid JSX, or a raw string. This can be used to pass in icons or more complex content.

import { Tooltip, Button, Icon } from "@valence-ui/core";
import { Icon123 } from "@tabler/icons-react";

function MyComponent() { 
    return ( 
        <Tooltip>
            <Tooltip.Trigger>
                <Button>
                    I'm a button!
                </Button>
            </Tooltip.Trigger>
            <Tooltip.Content>
                <Icon>
                    <Icon123 />
                </Icon>
            </Tooltip.Content>
        </Tooltip>
    )
}

---

Props

TooltipProps

Extends TooltipOptions.

Property	Type	Description
children (required)	ReactNode

TooltipTriggerProps

Property	Type	Description
children (required)	ReactElement<any>

TooltipContentProps

Extends StyledFlexProps.

Property	Type	Description
children (required)	string | ReactNode
withShadow	boolean	Whether to display a shadow underneath the tooltip.
zIndex	CSSProperties["zIndex"]	The z-index of the tooltip.

---

Changelog

• 2.2.0: Uncontrolled tooltips will no longer show on mobile breakpoints. Controlled tooltips (i.e. those that accept the disclosure prop) are unaffected.