Tooltip

'use client'

import { Button, Tooltip, TooltipContent, TooltipTrigger, type TooltipProps } from '@pillar-ui/core'

export function TooltipBase({ delay }: { delay: number }) {
  return (
    <Tooltip delay={delay}>
      <TooltipTrigger as={Button}>hello</TooltipTrigger>
      <TooltipContent>Hello world</TooltipContent>
    </Tooltip>
  )
}
export const TooltipDelay = () => {
  return (
    <>
      <TooltipBase delay={100} />
      <TooltipBase delay={300} />
      <TooltipBase delay={400} />
      <TooltipBase delay={500} />
      <TooltipBase delay={600} />
      <TooltipBase delay={700} />
      <TooltipBase delay={1500} />
    </>
  )
}

'use client'

import React from 'react'
import { Tooltip, Flex, TooltipTrigger, TooltipContent, TooltipProps, Size, Button, IconButton } from '@pillar-ui/core'
import { ThumbUp } from '@pillar-ui/icons'

export const TooltipTriggerAs = () => {
  return (
    <Flex gap="6">
      <Tooltip>
        <TooltipTrigger as={Button} color="d">
          hello
        </TooltipTrigger>
        <TooltipContent>Hello world</TooltipContent>
      </Tooltip>

      <Tooltip>
        <TooltipTrigger as={IconButton} title="Like" icon={<ThumbUp />} color="d" />
        <TooltipContent>Click To like</TooltipContent>
      </Tooltip>
    </Flex>
  )
}

'use client'

import { Button, Corner, Tooltip, TooltipContent, TooltipTrigger, type TooltipProps } from '@pillar-ui/core'

export function TooltipBase({ corner }: { corner: Corner }) {
  return (
    <Tooltip>
      <TooltipTrigger as={Button}>hello</TooltipTrigger>
      <TooltipContent corner={corner}>Hello world</TooltipContent>
    </Tooltip>
  )
}
export const TooltipCorner = () => {
  return (
    <>
      <TooltipBase corner="0" />
      <TooltipBase corner="1" />
      <TooltipBase corner="2" />
      <TooltipBase corner="3" />
      <TooltipBase corner="4" />
      <TooltipBase corner="5" />
      <TooltipBase corner="full" />
    </>
  )
}

'use client'

import React from 'react'
import { Tooltip, Flex, TooltipTrigger, TooltipContent, TooltipProps, Size, Button } from '@pillar-ui/core'

export function TooltipBase({ size }: { size: Size }) {
  return (
    <Tooltip>
      <TooltipTrigger as={Button}>hello</TooltipTrigger>
      <TooltipContent size={size}>Hello world</TooltipContent>
    </Tooltip>
  )
}

export const TooltipSize = () => {
  return (
    <Flex gap="6">
      <TooltipBase size="1" />
      <TooltipBase size="2" />
      <TooltipBase size="3" />
      <TooltipBase size="4" />
      <TooltipBase size="5" />
      <TooltipBase size="6" />
      <TooltipBase size="7" />
      <TooltipBase size="8" />
      <TooltipBase size="9" />
    </Flex>
  )
}

'use client'

import { Button, Tooltip, TooltipContent, TooltipTrigger } from '@pillar-ui/core'
import React from 'react'

export function TooltipBase({ position }: { position: 'top' | 'bottom' | 'left' | 'right' }) {
  return (
    <Tooltip>
      <TooltipTrigger as={Button}>hello</TooltipTrigger>
      <TooltipContent position={position}>Hello world</TooltipContent>
    </Tooltip>
  )
}

export const TooltipPosition = () => {
  return (
    <>
      <TooltipBase position="top" />
      <TooltipBase position="bottom" />
      <TooltipBase position="left" />
      <TooltipBase position="right" />
    </>
  )
}

'use client'

import { Button, Tooltip, TooltipContent, TooltipTrigger } from '@pillar-ui/core'
import React from 'react'

export function TooltipBase({ align }: { align: 'start' | 'end' | 'center' }) {
  return (
    <Tooltip>
      <TooltipTrigger as={Button}>hello</TooltipTrigger>
      <TooltipContent align={align}>Hello world</TooltipContent>
    </Tooltip>
  )
}

export const TooltipAlign = () => {
  return (
    <>
      <TooltipBase align="start" />
      <TooltipBase align="end" />
      <TooltipBase align="center" />
    </>
  )
}