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

ToggleButton ModalLayer