Tooltip

포인터나 키보드 초점에 뜨는 짧은 이름 보조.

개요

미리보기

예시 언어동작 줄이기

오버레이는 무대 안에 비모달 정적 상태로 그립니다. 실제 동작은 트리거 버튼으로 확인하세요.

label

placement

open

이렇게 아이콘 버튼의 이름을 보여줄 때만 쓴다. 터치에서는 보이지 않으므로 꼭 필요한 정보는 툴팁에 두지 않는다. 문장이 아니라 2–4단어로 쓴다.
이렇게 아이콘의 뜻을 보충할 때만 쓴다. 없어도 화면을 쓸 수 있어야 한다.
이렇게 하지 않기 IconButton의 이름을 툴팁으로 대신하지 않는다.
이렇게 하지 않기 disabled 이유, 오류, 링크·버튼을 툴팁에 넣지 않는다.

이름	타입	기본값	설명
`label`	`string`	`라이브러리에 추가`	보충 설명만. 이름·필수 정보·오류를 담지 않는다. 최대 2줄.
`placement?`	`'top' \| 'bottom'`	`top`	선호 위치. 공간이 없으면 반대로 뒤집는다.
`open?`	`boolean`	`false`	강제로 보이게 한다(카탈로그). 평소에는 포인터와 초점이 정한다.
`children`	`ReactElement`	—	이미 이름이 있는 초점 가능한 요소 하나. aria-describedby가 붙는다. 미리보기는 IconButton.
`popover="hint"`	—	—	지원하면 hint, 아니면 manual popover. 열린 Menu를 닫지 않는다.

개요

미리보기

예시 언어동작 줄이기

오버레이는 무대 안에 비모달 정적 상태로 그립니다. 실제 동작은 트리거 버튼으로 확인하세요.

label

placement

open

이렇게 · 이렇게 하지 않기

이렇게 아이콘 버튼의 이름을 보여줄 때만 쓴다. 터치에서는 보이지 않으므로 꼭 필요한 정보는 툴팁에 두지 않는다. 문장이 아니라 2–4단어로 쓴다.

이렇게 아이콘의 뜻을 보충할 때만 쓴다. 없어도 화면을 쓸 수 있어야 한다.

이렇게 하지 않기 IconButton의 이름을 툴팁으로 대신하지 않는다.

이렇게 하지 않기 disabled 이유, 오류, 링크·버튼을 툴팁에 넣지 않는다.

토큰과 속성

이름	타입	기본값	설명
`label`	`string`	`라이브러리에 추가`	보충 설명만. 이름·필수 정보·오류를 담지 않는다. 최대 2줄.
`placement?`	`'top' \| 'bottom'`	`top`	선호 위치. 공간이 없으면 반대로 뒤집는다.
`open?`	`boolean`	`false`	강제로 보이게 한다(카탈로그). 평소에는 포인터와 초점이 정한다.
`children`	`ReactElement`	—	이미 이름이 있는 초점 가능한 요소 하나. aria-describedby가 붙는다. 미리보기는 IconButton.
`popover="hint"`	—	—	지원하면 hint, 아니면 manual popover. 열린 Menu를 닫지 않는다.