# Component/Popover

> Props: component-popover.props.txt

## Examples


### Base

```tsx
{
  args: {
    title: 'Title',
    description: 'Description',
    label: <LabelWithIcon />
  },
  render: args => <Stack direction='column' gap={16} align='center'>
      <Stack direction='row' gap={24} align='center' style={{
      height: '400px'
    }}>
        <Popover {...args}>
          <Button>ref를 가져올 수 있는 컴포넌트</Button>
        </Popover>
      </Stack>
    </Stack>
}
```

### Controlled

```tsx
{
  render: () => {
    const [hovered, setHovered] = useState(false);
    const [clicked, setClicked] = useState(false);
    return <Stack direction='row' p={12} gap={20} align='center'>
        <Popover opened={hovered} onOpen={() => setHovered(true)} onClose={() => setHovered(false)} openerTriggerEvent='hover' closeButton title='Title' placement='bottom-end' arrow={false} description='Description' label={<LabelWithIcon />}>
          <Button endIcon={hovered ? <IconArrowTriangleUp /> : <IconArrowTriangleDown />}>Hover Me</Button>
        </Popover>
        <Popover opened={clicked} onOpen={() => setClicked(true)} onClose={() => setClicked(false)} openerTriggerEvent='click' closeButton title='Title' placement='bottom-end' arrow={false} description='Description' label={<LabelWithIcon />}>
          <Button endIcon={clicked ? <IconArrowTriangleUp /> : <IconArrowTriangleDown />}>Click Me</Button>
        </Popover>
      </Stack>;
  }
}
```

### Description Only

디스크립션만 활용하는 케이스입니다.

```tsx
{
  render: () => <Stack direction='row' p={12} align='center'>
      <Popover description='디스크립션만 있는 디자인 입니다'>
        <Button>Hover Me</Button>
      </Popover>
    </Stack>,
  parameters: {
    docs: {
      description: {
        story: '디스크립션만 활용하는 케이스입니다.'
      }
    }
  }
}
```

### Hiding Fully Clipped Reference Elements

```tsx
{
  render: () => <div style={{
    height: '300px',
    overflowY: 'scroll',
    border: '1px solid black'
  }}>
      <Stack direction='column' mt={100} gap={100} align='center' height={800} style={{
      position: 'relative'
    }}>
        <Popover openerTriggerEvent='click' title='Help Text Title' closeButton description='As Function Content'>
          <Button>Close With CloseButton</Button>
        </Popover>
      </Stack>
    </div>
}
```

### Hover Icon

```tsx
{
  render: () => <Stack direction='row' gap={12} align='center'>
      <Popover content={<HelpText title='Help Text Title' contents={[{
      text: '- 여러 줄글의 텍스트를 작성할 수 있습니다.'
    }, {
      text: '- 여러 줄글의 텍스트를 작성할 수 있습니다.'
    }]} />}>
        <div>
          <IconCircleQuestion />
        </div>
      </Popover>
    </Stack>
}
```

### No Arrow

화살표가 빠지고 border-radius와 box-shadow가 적용됩니다.

```tsx
{
  render: () => <Stack direction='row' p={12} align='center'>
      <Popover arrow={false} title='Popover Title' description='여러 줄글의 텍스트를 작성할 수 있습니다.' label={<LabelWithIcon />}>
        <Button>Click Me</Button>
      </Popover>
    </Stack>,
  parameters: {
    docs: {
      description: {
        story: '화살표가 빠지고 border-radius와 box-shadow가 적용됩니다.'
      }
    }
  }
}
```

### Placement

```tsx
{
  render: () => {
    const placements: Side[] = ['left', 'top', 'right', 'bottom', 'bottom-end'];
    return <Stack direction='column' gap={28} align='center' style={{
      marginTop: '100px'
    }}>
        {placements.map(placement => {
        return <Popover key={placement} placement={placement} content={<HelpText title='Popover Title' contents={[{
          text: '여러 줄글의 텍스트를 작성할 수 있습니다.'
        }, {
          text: <LabelWithIcon />
        }]} />}>
              <Button>{placement}</Button>
            </Popover>;
      })}
      </Stack>;
  }
}
```

### Template With Close Button

Title, Description, CloseButton 속성이 있을 경우 정의된 조합 레이아웃 컨텐츠 구성이 가능합니다.

```tsx
{
  render: () => <Stack direction='row' p={12} align='center'>
      <Popover openerTriggerEvent='click' closeButton title='Title' description='Description' label={<LabelWithIcon />}>
        <Button>Click Me</Button>
      </Popover>
    </Stack>,
  parameters: {
    docs: {
      description: {
        story: 'Title, Description, CloseButton 속성이 있을 경우 정의된 조합 레이아웃 컨텐츠 구성이 가능합니다.'
      }
    }
  }
}
```

### Trigger

```tsx
{
  render: () => <Stack direction='row' p={12} gap={20} align='center'>
      <Stack direction='row' align='center'>
        <Popover title='Title' description='Description' label={<LabelWithIcon />}>
          <Button>Hover Me</Button>
        </Popover>
      </Stack>
      <Stack direction='row' align='center'>
        <Popover openerTriggerEvent='click' title='Title' description='Description' label={<LabelWithIcon />}>
          <Button>Click Me</Button>
        </Popover>
      </Stack>
    </Stack>
}
```

### Width

```tsx
{
  args: {
    title: 'Title',
    description: 'Description',
    label: <LabelWithIcon />
  },
  render: args => <Stack direction='column' gap={16} align='center'>
      <Stack direction='row' gap={24} align='center' style={{
      height: '400px'
    }}>
        <Popover {...args}>
          <Button>ref를 가져올 수 있는 컴포넌트</Button>
        </Popover>
      </Stack>
    </Stack>,
  args: {
    title: 'Width: 450',
    description: '기본 너비는 300px이지만 커스텀이 가능합니다.',
    width: 450
  }
}
```