Tooltip

Popup with brief information shown when user interacts with an element using keyboard focus or mouse hover.

#
Documentation

#
Usage


import { Button, Tooltip } from "@optiaxiom/react";
 
export function App() {
  return (
    <Tooltip content="Sample tooltip content">
      <Button>Hover me</Button>
    </Tooltip>
  );
}

#
Controlled

Use the open and defaultOpen props to toggle between controlled and uncontrolled usage. And combine it with onOpenChange to listen for changes to the state.

Open: false


import { Button, Flex, Text, Tooltip } from "@optiaxiom/react";
import { useState } from "react";
 
export function App() {
  const [open, setOpen] = useState(false);
 
  return (
    <Flex gap="12">
      <Tooltip
        content="This is a controlled tooltip"
        onOpenChange={setOpen}
        open={open}
      >
        <Button>Hover me</Button>
      </Tooltip>
 
      <Text>Open: {open ? "true" : "false"}</Text>
    </Flex>
  );
}

#
Delay

Use the delayDuration prop to control how long to wait to open the tooltip after mouse hover.


import { Button, Flex, Tooltip } from "@optiaxiom/react";
 
export function App() {
  return (
    <Flex flexDirection="row">
      <Tooltip content="Sample tooltip content" delayDuration={0}>
        <Button>Delay duration 0ms</Button>
      </Tooltip>
 
      <Tooltip content="Sample tooltip content">
        <Button>Delay duration 700ms</Button>
      </Tooltip>
    </Flex>
  );
}

#
Placement

Use the side and align props to control where the tooltip is placed by default.


import { Button, Grid, Tooltip } from "@optiaxiom/react";
 
export function App() {
  return (
    <Grid gap="8" gridTemplateColumns="3">
      <Tooltip align="start" content="Top Start" side="top">
        <Button py="20">Top Start</Button>
      </Tooltip>
      <Tooltip align="center" content="Top Center" side="top">
        <Button py="20">Top Center</Button>
      </Tooltip>
      <Tooltip align="end" content="Top End" side="top">
        <Button py="20">Top End</Button>
      </Tooltip>
 
      <Tooltip align="start" content="Right Start" side="right">
        <Button py="20">Right Start</Button>
      </Tooltip>
      <Tooltip align="center" content="Right Center" side="right">
        <Button py="20">Right Center</Button>
      </Tooltip>
      <Tooltip align="end" content="Right End" side="right">
        <Button py="20">Right End</Button>
      </Tooltip>
 
      <Tooltip align="start" content="bottom-start" side="bottom">
        <Button py="20">Bottom Start</Button>
      </Tooltip>
      <Tooltip align="center" content="bottom-center" side="bottom">
        <Button py="20">Bottom Center</Button>
      </Tooltip>
      <Tooltip align="end" content="bottom-end" side="bottom">
        <Button py="20">Bottom End</Button>
      </Tooltip>
 
      <Tooltip align="start" content="Left Start" side="left">
        <Button py="20">Left Start</Button>
      </Tooltip>
      <Tooltip align="center" content="Left Center" side="left">
        <Button py="20">Left Center</Button>
      </Tooltip>
      <Tooltip align="end" content="Left End" side="left">
        <Button py="20">Left End</Button>
      </Tooltip>
    </Grid>
  );
}

#
Props

#
Tooltip

Doesn't render its own HTML element and forwards all props to the content component instead.

Prop
`align` `"center" \| "end" \| "start"`
`aria-label` A more descriptive label for accessibility purpose `string`
`auto` Enable this option to only show the tooltip when children is partially hidden due to text overflow. `false \| true`
`className` `string`
`content` The tooltip content. `ReactNode`
`defaultOpen` The initial open state in uncontrolled mode. `false \| true`
`delayDuration` The duration from when the pointer enters the trigger until the tooltip gets opened. This will override the prop with the same name passed to Provider. @defaultValue 700 `number`
`disabled` Whether to show or hide tooltip even if there’s content. `false \| true`
`onEscapeKeyDown` Event handler called when the escape key is down. Can be prevented. `(event: KeyboardEvent) => void`
`onOpenChange` Handler that is called when the open state changes. `(open: boolean) => void`
`onPointerDownOutside` Event handler called when the a `pointerdown` event happens outside of the `Tooltip`. Can be prevented. `(event: PointerDownOutsideEvent) => void`
`open` The open state in controlled mode. `false \| true`
`side` `"bottom" \| "left" \| "right" \| "top"`

#
TooltipProvider

Doesn't render its own HTML element.

Prop
`delayDuration` The duration from when the pointer enters the trigger until the tooltip gets opened. @defaultValue 700 `number`
`disableHoverableContent` When `true`, trying to hover the content will result in the tooltip closing as the pointer leaves the trigger. `false \| true` Default: `true`
`skipDelayDuration` How much time a user has to enter another trigger without incurring a delay again. @defaultValue 300 `number`

#
Changelog

#
0.1.0

Added component