Motile UI

Tooltip

요소에 마우스를 올리면 표시되는 설명 컴포넌트입니다. Compound Component 구조(Root, Trigger, Content)로 동작하며, filled와 outlined 두 가지 스타일을 제공합니다. 위치(position), 정렬(align), 화살표 표시, 커스텀 색상 등을 지원합니다.

미리보기

사용법

1"use client";
2
3import { Button, Tooltip } from "motile-ui";
4
5export default function PreviewExample() {
6  return (
7    <div style={{ display: "flex", justifyContent: "center" }}>
8      <Tooltip.Root>
9        <Tooltip.Trigger>
10          <Button variant="primary">Hover me</Button>
11        </Tooltip.Trigger>
12        <Tooltip.Content>This is a tooltip</Tooltip.Content>
13      </Tooltip.Root>
14    </div>
15  );
16}

API 레퍼런스

Tooltip.Root

툴팁의 상태와 설정을 관리하는 최상위 컴포넌트

속성타입기본값설명
position"top" | "bottom" | "left" | "right""top"툴팁 위치 (top, bottom, left, right)
align"start" | "center" | "end""center"툴팁 정렬 방식 - top/bottom일 때: start(왼쪽), center(중앙), end(오른쪽) / left/right일 때: start(위), center(중앙), end(아래)
variant"filled" | "outlined""filled"툴팁 스타일 (filled: 채워진 배경, outlined: 테두리)
colorstring-툴팁 배경 색상 (커스텀 색상 지정)
showArrowbooleanfalse화살표 표시 여부
keepOpenbooleanfalse툴팁 콘텐츠에 마우스를 올려도 닫히지 않도록 유지 (버튼 클릭 등 인터랙션 가능)
offsetnumber | { top?: number; bottom?: number; left?: number; right?: number }{ top: 7, bottom: 6, left: 12, right: 6 }툴팁과 트리거 사이의 간격 (px) - number 또는 방향별 개별 설정 가능

Tooltip.Trigger

마우스 호버 시 툴팁을 표시하는 트리거 요소

속성타입기본값설명
childrenReact.ReactElement-트리거로 사용할 React 요소
asChildbooleanfalse래퍼 없이 자식 요소만 렌더링

Tooltip.Content

툴팁에 표시될 내용을 담는 컴포넌트

속성타입기본값설명
childrenReact.ReactNode-툴팁에 표시될 내용

예제

윤곽선 스타일

1"use client";
2
3import { Button, Tooltip } from "motile-ui";
4
5export default function OutlinedExample() {
6  return (
7    <div style={{ display: "flex", justifyContent: "center" }}>
8      <Tooltip.Root variant="outlined">
9        <Tooltip.Trigger>
10          <Button variant="primary">Outlined tooltip</Button>
11        </Tooltip.Trigger>
12        <Tooltip.Content>Outlined style tooltip</Tooltip.Content>
13      </Tooltip.Root>
14    </div>
15  );
16}

화살표 표시

1"use client";
2
3import { Button, Tooltip } from "motile-ui";
4
5export default function WithArrowExample() {
6  return (
7    <div style={{ display: "flex", justifyContent: "center" }}>
8      <Tooltip.Root showArrow>
9        <Tooltip.Trigger>
10          <Button variant="primary">Tooltip with arrow</Button>
11        </Tooltip.Trigger>
12        <Tooltip.Content>This tooltip has an arrow</Tooltip.Content>
13      </Tooltip.Root>
14    </div>
15  );
16}

위치 설정

1"use client";
2
3import { Button, Tooltip } from "motile-ui";
4
5export default function PositionExample() {
6  return (
7    <div
8      style={{
9        display: "flex",
10        justifyContent: "center",
11        gap: "16px",
12        flexWrap: "wrap",
13      }}
14    >
15      <Tooltip.Root position="top">
16        <Tooltip.Trigger>
17          <Button variant="secondary">Top</Button>
18        </Tooltip.Trigger>
19        <Tooltip.Content>Top position</Tooltip.Content>
20      </Tooltip.Root>
21
22      <Tooltip.Root position="bottom">
23        <Tooltip.Trigger>
24          <Button variant="secondary">Bottom</Button>
25        </Tooltip.Trigger>
26        <Tooltip.Content>Bottom position</Tooltip.Content>
27      </Tooltip.Root>
28
29      <Tooltip.Root position="left">
30        <Tooltip.Trigger>
31          <Button variant="secondary">Left</Button>
32        </Tooltip.Trigger>
33        <Tooltip.Content>Left position</Tooltip.Content>
34      </Tooltip.Root>
35
36      <Tooltip.Root position="right">
37        <Tooltip.Trigger>
38          <Button variant="secondary">Right</Button>
39        </Tooltip.Trigger>
40        <Tooltip.Content>Right position</Tooltip.Content>
41      </Tooltip.Root>
42    </div>
43  );
44}

정렬 방식

1"use client";
2
3import { Button, Tooltip } from "motile-ui";
4
5export default function AlignExample() {
6  return (
7    <div
8      style={{
9        display: "flex",
10        justifyContent: "center",
11        gap: "16px",
12        flexWrap: "wrap",
13      }}
14    >
15      <Tooltip.Root align="start" showArrow>
16        <Tooltip.Trigger>
17          <Button variant="secondary">Start</Button>
18        </Tooltip.Trigger>
19        <Tooltip.Content>Start aligned</Tooltip.Content>
20      </Tooltip.Root>
21
22      <Tooltip.Root align="center" showArrow>
23        <Tooltip.Trigger>
24          <Button variant="secondary">Center</Button>
25        </Tooltip.Trigger>
26        <Tooltip.Content>Center aligned</Tooltip.Content>
27      </Tooltip.Root>
28
29      <Tooltip.Root align="end" showArrow>
30        <Tooltip.Trigger>
31          <Button variant="secondary">End</Button>
32        </Tooltip.Trigger>
33        <Tooltip.Content>End aligned</Tooltip.Content>
34      </Tooltip.Root>
35    </div>
36  );
37}

인터랙티브 툴팁

1"use client";
2
3import { Button, Tooltip } from "motile-ui";
4
5export default function InteractiveExample() {
6  return (
7    <div style={{ display: "flex", justifyContent: "center" }}>
8      <Tooltip.Root keepOpen variant="outlined" showArrow>
9        <Tooltip.Trigger>
10          <Button variant="primary">Interactive tooltip</Button>
11        </Tooltip.Trigger>
12        <Tooltip.Content>
13          <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
14            <p style={{ margin: 0, fontSize: "13px" }}>
15              Click the button below
16            </p>
17            <Button
18              variant="primary"
19              size="small"
20              onClick={() => alert("Button clicked!")}
21            >
22              Click me
23            </Button>
24          </div>
25        </Tooltip.Content>
26      </Tooltip.Root>
27    </div>
28  );
29}
Tooltip | Motile UI