Nemo
컴포넌트FOX · Tooltip

툴팁

마우스를 올리거나 키보드 초점이 오면 뜨는 짧은 설명이에요. 먹색 네모에 종이색 글자로 쓰고, 작은 그림자가 붙어요.

방향

붙일 요소 기준으로 위, 아래, 왼쪽, 오른쪽에 띄울 수 있어요. 기본은 위예요.

PLACEMENT
위에 떠요아래에 떠요왼쪽에 떠요오른쪽에 떠요
<Tooltip content="위에 떠요" placement="top"><Button>위</Button></Tooltip>
<Tooltip content="아래에 떠요" placement="bottom"><Button>아래</Button></Tooltip>
<Tooltip content="왼쪽에 떠요" placement="left"><Button>왼쪽</Button></Tooltip>
<Tooltip content="오른쪽에 떠요" placement="right"><Button>오른쪽</Button></Tooltip>

아이콘 버튼에 붙이기

이름 없이 그림만 있는 버튼에 설명을 더해 줘요. Tab으로 초점을 옮겨도 똑같이 보여요.

ICON
수수료는 건당 500원이에요
<Tooltip content="수수료는 건당 500원이에요">
  <IconButton label="수수료 안내"><InfoIcon /></IconButton>
</Tooltip>

접근성

풍선에 role이 tooltip으로 붙고, 붙인 요소에는 aria-describedby가 자동으로 연결돼요. Escape를 누르면 닫혀요. 마우스 없이도 같은 설명을 읽을 수 있어요.

이렇게 써요

「수수료는 건당 500원이에요」

이렇게한 줄로 짧게, 보충 설명만 담아요.

꼭 눌러야 하는 행동이나 긴 약관

이렇게 말고꼭 읽어야 하는 내용은 화면 본문에 직접 써요. 마우스를 올려야 보이는 곳에 숨기지 않아요.

속성

속성값기본값설명
contentReactNode없음풍선 안 글자
placement"top" | "bottom" | "left" | "right"top붙일 요소 기준 방향
childrenReactElement없음붙일 요소 하나. aria-describedby가 자동으로 붙는다