Popover

클릭 혹은 호버 시에 상황에 맞는 도움말이나 정보를 표시합니다. Tooltip보다 많은 양의 정보를 제공할 때 사용합니다.
TypescriptWAI-ARIA
Anatomy

팝오버를 구성하는 요소를 설명합니다.

AnatomyImage
Rules of Use
  • RulesofUseImage
    Location

    Popover는 상황에 따라 항목의 상단, 하단, 좌측,우측에 제공 될 수 있습니다. 호버시 Popover가 나타날 경우, 마우스 커서가 타겟 밖으로 이동하면 Popover가 사라집니다. 클릭시 Popover가 나타날 경우, 다시 클릭하면 Popover가 사라집니다.

  • RulesofUseImage
    Alignment

    클릭 혹은 호버 시 기준 패딩 8px을 두고 노출 됩니다. 대상과 팝오버는 수직으로 서로 중앙에 위치해야 합니다

Import
import { Popover } from '@goorm-dev/vapor-components';
Examples
Props
namedescriptiondefault
header

PopoverHeader의 children입니다.

stringelement
children

PopoverBody의 children입니다.

node
isOpen

Popover의 열림 여부를 설정합니다.

boolean
toggle

func
container

stringHTMLElementref
boundariesElement

element
placement

popover가 표시될 위치를 결정합니다.

toprightbottomleft
top
popperClassName

string
innerClassName

string
disabled

boolean
hideArrow

boolean
placementPrefix

string
delay

number
modifiers

object
positionFixed

boolean
cssModule

object
fade

boolean
flip

boolean
offset

string
target

stringHTMLElement