import { ArgsTable, Meta, Story } from "@storybook/addon-docs";
import { Button, IconButton } from "@components/button"
import { ComponentInfo, Preview, Tagline } from "@stories/components";
import { PlaceholderMajorIcon } from "@components/icons";
import { Inline } from "@components/layout";
import { InnerTooltip, InnerTooltipTrigger, Tooltip, TooltipTrigger } from "@components/tooltip";

<Meta
    title="Components/Tooltip"
    id="tooltip"
/>

# Tooltip

<Tagline>A tooltip is a popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.</Tagline>

<ComponentInfo
    usage={"import { TooltipTrigger, Tooltip, useTooltipTriggerContext } from \"@sharegate/orbit-ui\";"}
    ariaPath="tooltip"
    githubPath="/packages/components/src/tooltip/src"
/>

## Guidelines

### When to use

- To provide contextual information about an element when that element receives focus or is hovered over.

### Tooltip vs Popover

If you want a popup with rich content, have a look at the [popover](?path=/docs/popover--default-story) component.

## Usage

### Default

A default tooltip.

<Preview>
    <Story name="default">
        <TooltipTrigger>
            <Button variant="secondary">Trigger</Button>
            <Tooltip>Earth is a small town with many neighborhoods in a very big universe.</Tooltip>
        </TooltipTrigger>
    </Story>
</Preview>

### Trigger

A tooltip trigger can be anything.

<Preview>
    <Story name="trigger">
        <Inline gap={10} alignY="center">
            <TooltipTrigger>
                <IconButton variant="secondary" aria-label="An awesome quote">
                    <PlaceholderMajorIcon />
                </IconButton>
                <Tooltip>Earth is a small town with many neighborhoods in a very big universe.</Tooltip>
            </TooltipTrigger>
            <TooltipTrigger>
                <PlaceholderMajorIcon />
                <Tooltip>Send an email to the orbital space station.</Tooltip>
            </TooltipTrigger>
        </Inline>
    </Story>
</Preview>

### Position

A tooltip can open at different positions.

<Preview>
    <Story name="position">
        <TooltipTrigger position="right">
            <Button variant="secondary">Trigger</Button>
            <Tooltip>Earth is a small town with many neighborhoods in a very big universe.</Tooltip>
        </TooltipTrigger>
    </Story>
</Preview>

### Disabled

A tooltip can be disabled.

<Preview>
    <Story name="disabled">
        <TooltipTrigger disabled>
            <Button variant="secondary">Trigger</Button>
            <Tooltip>Earth is a small town with many neighborhoods in a very big universe.</Tooltip>
        </TooltipTrigger>
    </Story>
</Preview>

### Custom trigger

A tooltip trigger can update is appareance based on the `isOpen` value by using `useTooltipTriggerContext`.

Any trigger would work as long as it accepts a `ref` and any other props provided by the tooltip.

<Preview filePath="/tooltip/docs/CustomTrigger" />

### Controlled

The `open` state can be handled in controlled mode.

<Preview filePath="/tooltip/docs/ControlledTooltip" />

## API

### TooltipTrigger

<ComponentInfo
    usage={"import { TooltipTrigger } from \"@sharegate/orbit-ui\";"}
    inherits={[InnerTooltipTrigger.defaultElement, "styled-component"]}
    compact
/>

<ArgsTable of={InnerTooltipTrigger} sort="alpha" />

### Tooltip

<ComponentInfo
    usage={"import { Tooltip } from \"@sharegate/orbit-ui\";"}
    inherits={[InnerTooltip.defaultElement, "styled-component"]}
    compact
/>

<ArgsTable of={InnerTooltip} sort="alpha" />
