import Layout from '../../components/Layout'
import { ComponentsSidebar } from '../../sidebars'
import { Playground } from '../../components/Playground';
import { Code, Link, Heading, Paragraph } from '@knkui/typography';

export default function Tooltip() {
    return (
        <Layout
            title="Tooltip"
            showHero
            description="The Tooltip component is used to describe icon buttons"
            sidebar={ComponentsSidebar}
        >
            <Heading size={800}>Introduction</Heading>
            <Paragraph>
                The <Code>Tooltip</Code> component is used to describe icon buttons. In some cases tooltips are used to show more content,
                this should be used cautiously since it is <Link target="_blank" href="https://inclusive-components.design/tooltips-toggletips/">hard to be completely accessible</Link>.
            </Paragraph>
            <Playground
                codeText={
`
<Tooltip content="Hello you, i am a Tooltip!">
    <Button appearance="primary">Hover over me</Button>
</Tooltip>
`
                }
            />
            <Heading size={700}>Positioning</Heading>
            <Paragraph>
                The position of tooltips is flexible and will change depending on how close the element is to the edge of the screen.
                Tooltips have four standard positions available; <Code>top</Code>, <Code>right</Code>, <Code>bottom</Code>, and <Code>left</Code>.
                Each standard position center-aligns itself along the appropriate axis and appears outside the target element.
            </Paragraph>
        </Layout>
    )
}