Tooltip

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

"use client";
 
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>
  );
}

import { Button, Grid, Tooltip } from "@optiaxiom/react";
import { Fragment } from "react";
 
export function App() {
  return (
    <Grid gap="8" gridTemplateColumns="3">
      {(["top", "right", "bottom", "left"] as const).map((side) => (
        <Fragment key={side}>
          {(["start", "center", "end"] as const).map((align) => (
            <Tooltip
              align={align}
              content={`${side} ${align}`}
              key={align}
              side={side}
            >
              <Button justifyContent="center" py="20">
                {side} {align}
              </Button>
            </Tooltip>
          ))}
        </Fragment>
      ))}
    </Grid>
  );
}

"use client";
 
import type { ComponentPropsWithoutRef } from "react";
 
import { Flex, Link, Text, Tooltip } from "@optiaxiom/react";
 
export function App({
  auto = true,
}: Pick<ComponentPropsWithoutRef<typeof Tooltip>, "auto">) {
  return (
    <Flex alignItems="start" fontSize="md" w="224">
      <Tooltip
        auto={auto}
        content="The quick brown fox jumps over the lazy dog."
      >
        <Link href="data:,">
          <Text lineClamp="1">
            The quick brown fox jumps over the lazy dog.
          </Text>
        </Link>
      </Tooltip>
      <Tooltip auto={auto} content="Sample non-clipped link">
        <Link href="data:,">Sample non-clipped link</Link>
      </Tooltip>
    </Flex>
  );
}

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>
  );
}