Help Bubble

특정 요소를 가리키며 간결하고 상황에 맞는 정보를 제공하는 컴포넌트입니다.

구조도

Help Bubble은 Trigger를 기준으로 위치를 지정합니다. 다양한 Placement 옵션을 적절히 배치하여, 유저가 최대한 편리하게 정보를 이해하고 접근할 수 있도록 도와줍니다.

Offset은 Help Bubble과 Trigger 사이의 거리 값입니다. 기본값은 8입니다.

Modal 옵션은 유저의 화면을 일시적으로 멈춘 뒤 전달해야 하는 중요한 정보인 경우에 사용합니다. 다른 요소와 상호작용 할 수 없음을 Backdrop을 통해 전달합니다.

Help Bubble은 Close trigger를 가질 수 있습니다. 유저가 Help Bubble의 내용을 모두 읽었거나, 더 이상 필요하지 않을 때 Close trigger를 통해 닫을 수 있습니다.

Help Bubble 외부를 클릭하거나 터치, 또는 Tab키를 통해 다른 요소에 Focus 했을 때 Help Bubble을 닫을지 여부를 결정할 수 있습니다.

속성	값	기본값
placement	"top", "top-start", "top-end", "right", "right-start", "right-end", "bottom", "bottom-start", "bottom-end", "left", "left-start", "left-end"	"bottom"
offset	number	8pt
cross offset	number	0pt
is modal	false, true	gray
default open	false, true	false
show close trigger	false, true	false
close on interact outside	false, true	true