툴팁

hover 나 focus 때 짧은 보조 설명을 잉크빛 카드로 띄우는 레이어다. Muse에서는 지표 정의, 아이콘 버튼의 뜻, 줄임말 풀이처럼 지면을 어지럽히지 않고 곁들이고 싶은 설명에 쓴다. 문장이 길거나 상호작용이 필요한 내용은 Dialog 로 옮긴다.

활용 방법

기본

설명을 붙일 요소를 children 으로 감싸고 content 에 문구를 넘긴다. 기본 방향은 위쪽이다.

Preview

tsx

<Tooltip content="이번 호에 대한 편집자 노트">
  <Button variant="ghost" icon={<Info size={13} />}>노트</Button>
</Tooltip>

방향

side 로 툴팁이 열리는 방향을 정한다. 가장자리에 가까운 요소는 잘리지 않는 쪽으로 연다.

Preview

tsx

<Tooltip content="위" side="top">...</Tooltip>
<Tooltip content="아래" side="bottom">...</Tooltip>
<Tooltip content="왼쪽" side="left">...</Tooltip>
<Tooltip content="오른쪽" side="right">...</Tooltip>

아이콘 도움말

라벨만으로 뜻이 다 드러나지 않는 지표 옆에 도움말 아이콘을 두고 정의를 붙인다.

Preview

순 구독자

tsx

<span className="inline-flex items-center gap-1.5">
  순 구독자
  <Tooltip content="해지분을 뺀 이번 달 실제 구독자 수" side="right">
    <HelpCircle size={14} />
  </Tooltip>
</span>

속성

이름	타입	기본값	설명
content	ReactNode	-	툴팁에 띄울 짧은 설명
children	ReactNode	-	설명을 붙일 트리거 요소
side	"top" \| "bottom" \| "left" \| "right"	"top"	툴팁이 열리는 방향
className	string	-	트리거 래퍼 클래스