Popover

import { Popover } from '@tidbcloud/uikit'

import { Popover, Button, Text } from '@tidbcloud/uikit'
 
function Demo() {
  return (
    <Popover width={200} position="bottom" withArrow shadow="md">
      <Popover.Target>
        <Button>Toggle popover</Button>
      </Popover.Target>
      <Popover.Dropdown>
        <Text size="xs">This is the popover content</Text>
      </Popover.Dropdown>
    </Popover>
  )
}

import { useState } from 'react'
import { Popover, Button } from '@tidbcloud/uikit'
 
function Demo() {
  const [opened, setOpened] = useState(false)
 
  return (
    <Popover opened={opened} onChange={setOpened}>
      <Popover.Target>
        <Button onClick={() => setOpened((o) => !o)}>Toggle popover</Button>
      </Popover.Target>
      <Popover.Dropdown>Dropdown content</Popover.Dropdown>
    </Popover>
  )
}

import { useDisclosure } from '@tidbcloud/uikit'
import { Popover, Button, Text } from '@tidbcloud/uikit'
 
function Demo() {
  const [opened, { close, open }] = useDisclosure(false)
 
  return (
    <Popover width={200} position="bottom" withArrow opened={opened}>
      <Popover.Target>
        <Button onMouseEnter={open} onMouseLeave={close}>
          Hover me
        </Button>
      </Popover.Target>
      <Popover.Dropdown style={{ pointerEvents: 'none' }}>
        <Text size="sm">Hover popover content</Text>
      </Popover.Dropdown>
    </Popover>
  )
}

import { Popover, Button, TextInput } from '@tidbcloud/uikit'
 
function Demo() {
  return (
    <Popover width={300} trapFocus position="bottom" withArrow shadow="md">
      <Popover.Target>
        <Button>Toggle form</Button>
      </Popover.Target>
      <Popover.Dropdown>
        <TextInput label="Name" placeholder="Name" size="xs" />
        <TextInput label="Email" placeholder="Email" size="xs" mt="xs" />
      </Popover.Dropdown>
    </Popover>
  )
}

import { Popover, Button, Text } from '@tidbcloud/uikit'
 
function Demo() {
  return (
    <Popover width="target" position="bottom" withArrow>
      <Popover.Target>
        <Button w={280}>Toggle popover</Button>
      </Popover.Target>
      <Popover.Dropdown>
        <Text size="sm">Dropdown has same width as target</Text>
      </Popover.Dropdown>
    </Popover>
  )
}