Tooltip

"use client";

import { Tooltip, Button, Icon } from "astralis-ui";
import { Wand2 } from "lucide-react";

export function TooltipDemo() {
  return (
    <Tooltip>
      <Tooltip.Trigger>
        <Button variant="outline" colorScheme="gray" leftIcon={<Icon as={Wand2} size="xs" />} aria-label="Auto-format" />
      </Tooltip.Trigger>
      <Tooltip.Content withArrow>Auto-format the document</Tooltip.Content>
    </Tooltip>
  );
}

"use client";

import { Tooltip, Button, HStack } from "astralis-ui";

const sides = ["top", "right", "bottom", "left"] as const;

export function TooltipSides() {
  return (
    <HStack gap="3" wrap="wrap" justifyContent="center">
      {sides.map((side) => (
        <Tooltip key={side} side={side} delay={100}>
          <Tooltip.Trigger>
            <Button variant="subtle" size="sm">{side}</Button>
          </Tooltip.Trigger>
          <Tooltip.Content withArrow>Anchored {side}</Tooltip.Content>
        </Tooltip>
      ))}
    </HStack>
  );
}