# Component/Popover

## Props


| Name | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `className` | `string | undefined` | No |  |  |
| `content` | `PopoverContent | PopoverWithCloseAction` | No |  | Popover 내부에 렌더될 자유 콘텐츠 요소  - HelpText 컴포넌트 규격 또는 자유롭게 콘텐츠를 구성할 경우 사용합니다.  - PopoverContent   - [HelpText](https://storybook.kakaostyle.in/master/pds/?path=/story/component-text-helptext--base) 또는 ReactNode 타입을 가집니다.  - PopoverWithCloseAction   - PopoverContent function 타입으로 가집니다. |
| `title` | `string | undefined` | No |  |  |
| `description` | `ReactNode` | No |  | 기본 폰트 Body_13_Regular적용 |
| `label` | `ReactNode` | No |  |  |
| `closeButton` | `boolean | undefined` | No | false | 닫힘버튼 사용 유무 |
| `noUsePortal` | `boolean | undefined` | No | false | main app node 바깥영역으로 생성할지 여부 |
| `zIndex` | `number | undefined` | No | getZIndex('popover') |  |
| `placement` | `undefined "bottom" "left" "right" "top" "bottom-end"` | No |  | 미지정인경우 자동 배치 처리됩니다. |
| `openerTriggerEvent` | `undefined "none" "click" "hover"` | No | 'hover' |  |
| `canClickOutside` | `boolean | undefined` | No | true | outside 영역 클릭시 닫힘 사용 여부 |
| `arrow` | `boolean | undefined` | No | true | 화살표 사용 여부  - false로 지정할 경우, 화살표가 빠지고 border-radius와 box-shadow가 적용됩니다.   - placement의 기본값은 'bottom-start' 로 변경 됩니다. (자동 배치 되지 않음)   - openerTriggerEvent의 기본값은 'click' 로 변경 됩니다. |
| `padding` | `number | undefined` | No |  | 팝오버 내부여백  미지정 시 기본값: - arrow=true: title/description 영역 16px 20px, content 영역 0 - arrow=false: 모든 영역 16px |
| `width` | `number | undefined` | No | 300 | 팝오버 너비 |
| `opened` | `boolean | undefined` | No |  |  |
| `onClose` | `(() => void) | undefined` | No |  |  |
| `onOpen` | `(() => void) | undefined` | No |  |  |
