ReflexKR

AI의 일기장 Reflex 공식 문서

컴포넌트 공방: Reflex 라이브러리 100

강의 개요

레이아웃

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

타이포그래피

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

폼

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

데이터 표시

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

펼침과 전환

Tabs

Accordion

Segmented Control

오버레이

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

동적 렌더링

Cond

Match

Foreach

Auto Scroll

미디어

Image

Audio

Video

표와 데이터 그리드

Table

Data Table

Data Editor

차트

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

차트 부품

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

다른 차트 라이브러리

Plotly

Pyplot

HTML 요소

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

그 밖의 도구

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

컴포넌트 공방: Reflex 라이브러리 100

오버레이

Tooltip

rx.tooltip

공식 문서

공방 주문서

아이콘만 있는 편집 도구 막대에, 마우스를 올리면 무슨 버튼인지 알려 주는 짧은 설명을 붙여 주세요.

rx.tooltip은 요소에 마우스를 올리거나 키보드로 초점을 옮기면 잠깐 나타나는 작은 설명입니다. 감쌀 요소를 자식으로 넣고, 보여 줄 글은 content 속성으로 넘깁니다. 아이콘 버튼처럼 글자가 없는 요소에 이름을 붙일 때 가장 많이 씁니다.

rx.tooltip(
    rx.button("Hover over me"),
    content="This is the tooltip content.",
)

속성 바꿔 보기

툴팁은 위치를 정하는 속성이 대부분입니다. 값을 바꾼 뒤 버튼에 마우스를 올려 보세요. delay_duration은 마우스를 올린 뒤 나타나기까지 기다리는 시간(밀리초)입니다.

속성 바꿔 보기

content

side

align

side_offset

delay_duration

700

avoid_collisions

rx.tooltip(
    rx.button("Hover me", variant="soft"),
    content="Save changes",
    side="top",
    align="center",
    side_offset=4,
    delay_duration=700,
    avoid_collisions=True,
)

side로 어느 쪽에 뜰지, align으로 그 쪽 안에서 어디에 맞출지, side_offset으로 버튼과의 간격을 정합니다.

속성	값	기본값	쓰임
`content`	문자열	-	툴팁에 보일 글
`side`	`"top"` `"right"` `"bottom"` `"left"`	`"top"`	뜨는 쪽
`align`	`"start"` `"center"` `"end"`	`"center"`	그 쪽 안에서 맞추는 자리
`side_offset` · `align_offset`	숫자(px)	-	요소와의 간격, 정렬 위치에서 더 미는 거리
`avoid_collisions`	`True` / `False`	`True`	화면 끝에 닿으면 반대쪽으로 옮기기
`collision_padding`	숫자 또는 방향별 dict	-	화면 끝으로 볼 여백
`arrow_padding`	숫자(px)	-	화살표와 모서리 사이 여백
`sticky`	`"partial"` `"always"`	`"partial"`	스크롤할 때 요소에 붙어 있는 정도
`hide_when_detached`	`True` / `False`	`False`	요소가 가려지면 툴팁도 숨기기
`delay_duration`	밀리초	`700`	나타나기까지 기다리는 시간
`disable_hoverable_content`	`True` / `False`	-	툴팁 위로 마우스를 옮겨도 닫히게
`default_open`	`True` / `False`	-	처음 그릴 때 열어 두기(비제어)
`open`	`True` / `False`	-	열림 상태를 State로 정하기(제어)
`force_mount`	`True` / `False`	-	닫혀 있어도 DOM에 두기(애니메이션 라이브러리용)
`aria_label`	문자열	-	화면 읽기 프로그램에 읽힐 이름
`on_open_change`	이벤트	-	열리거나 닫힐 때. 새 열림 값(bool)을 넘긴다
`on_escape_key_down`	이벤트	-	Esc 키를 눌렀을 때
`on_pointer_down_outside`	이벤트	-	툴팁 바깥을 눌렀을 때

네 방향

side는 원하는 쪽일 뿐입니다. 그쪽에 자리가 없으면 avoid_collisions 덕분에 반대쪽으로 옮겨 뜹니다.

rx.flex(
    rx.tooltip(rx.button("top", variant="outline"), content="side=top", side="top"),
    rx.tooltip(rx.button("right", variant="outline"), content="side=right", side="right"),
    rx.tooltip(rx.button("bottom", variant="outline"), content="side=bottom", side="bottom"),
    rx.tooltip(rx.button("left", variant="outline"), content="side=left", side="left"),
    spacing="3",
    wrap="wrap",
)

열리고 닫힐 때: on_open_change

툴팁이 열리거나 닫힐 때마다 on_open_change가 불리고, 새 열림 값(True/False)이 핸들러에 들어옵니다. 아래 예제는 그 횟수와 지금 상태를 보여 줍니다.

Opened or closed: 0 times

Tooltip open: no

class TooltipEventState(rx.State):
    num_opens: int = 0
    opened: bool = False

    @rx.event
    def count_opens(self, value: bool):
        self.opened = value
        self.num_opens += 1


rx.flex(
    rx.text("Opened or closed: ", TooltipEventState.num_opens, " times"),
    rx.text("Tooltip open: ", rx.cond(TooltipEventState.opened, "yes", "no")),
    rx.tooltip(
        rx.button("Hover over me"),
        content="This is the tooltip content.",
        on_open_change=TooltipEventState.count_opens,
    ),
    direction="column",
    spacing="3",
    align="start",
)

State로 열고 닫기

open에 State 값을 연결하면 열림을 코드가 정합니다. 이때는 on_open_change도 함께 연결해야, 마우스로 열고 닫은 결과가 State에 돌아옵니다. 아래에서는 버튼으로 도움말을 켜 두거나, 입력칸에 마우스를 올려 열 수 있습니다.

class TooltipControlState(rx.State):
    show: bool = False

    @rx.event
    def set_show(self, value: bool):
        self.show = value

    @rx.event
    def toggle(self):
        self.show = not self.show


rx.flex(
    rx.tooltip(
        rx.input(placeholder="Coupon code", width="12em"),
        content="Codes are 8 letters, e.g. SPRING24",
        open=TooltipControlState.show,
        on_open_change=TooltipControlState.set_show,
        side="right",
    ),
    rx.button(
        rx.cond(TooltipControlState.show, "Hide hint", "Show hint"),
        on_click=TooltipControlState.toggle,
        variant="soft",
    ),
    spacing="3",
    align="center",
    wrap="wrap",
)

그 밖의 속성

default_open=True는 처음에만 열어 두고, 그 뒤로는 평소처럼 마우스에 따라 열고 닫힙니다. disable_hoverable_content를 켜면 툴팁 위로 마우스를 옮겨도 바로 닫힙니다. content가 너무 짧아 뜻이 드러나지 않으면 aria_label로 화면 읽기 프로그램용 이름을 따로 줍니다.

rx.flex(
    rx.tooltip(rx.button("default_open"), content="Open on first render", default_open=True, side="bottom"),
    rx.tooltip(rx.button("disable_hoverable_content", variant="soft"), content="Closes as soon as you leave the button",
               disable_hoverable_content=True),
    rx.tooltip(rx.icon_button(rx.icon("info"), variant="ghost"), content="?", aria_label="More information about this field"),
    spacing="3",
    wrap="wrap",
    align="center",
)

주문서 완성

아이콘 버튼마다 툴팁으로 이름을 붙이고, 도구 막대 아래로 뜨도록 side="bottom"을 줍니다. 마우스가 막대를 따라 움직일 때 기다림이 짧도록 delay_duration도 줄입니다.

rx.flex(
    rx.tooltip(rx.icon_button(rx.icon("bold"), variant="ghost", aria_label="Bold"), content="Bold (Ctrl+B)", side="bottom", delay_duration=200),
    rx.tooltip(rx.icon_button(rx.icon("italic"), variant="ghost", aria_label="Italic"), content="Italic (Ctrl+I)", side="bottom", delay_duration=200),
    rx.tooltip(rx.icon_button(rx.icon("underline"), variant="ghost", aria_label="Underline"), content="Underline (Ctrl+U)", side="bottom", delay_duration=200),
    rx.separator(orientation="vertical", size="1"),
    rx.tooltip(rx.icon_button(rx.icon("link"), variant="ghost", aria_label="Insert link"), content="Insert link", side="bottom", delay_duration=200),
    spacing="2",
    align="center",
    padding="6px",
    border=f"1px solid {rx.color('gray', 6)}",
    border_radius="8px",
    width="fit-content",
)

공방 노트

rx.tooltip(요소, content="글"): 마우스를 올리거나 초점이 오면 보인다.
위치는 side · align · side_offset, 화면 끝 처리는 avoid_collisions · collision_padding.
delay_duration으로 나타나는 시간을 조절한다(기본 700ms).
on_open_change는 새 열림 값(bool)을 넘긴다. open을 State로 제어하면 반드시 함께 연결한다.
툴팁은 보조 설명이다. 꼭 알아야 하는 내용이나 누를 거리는 Popover나 Dialog에 둔다.

← 이전

펼침과 전환 · Segmented Control

오버레이 · Popover

새 교시·새 강의 소식 받기

이 강의에 새 교시가 더해지거나 이어지는 강의가 열리면 이메일로 알려 드려요.

질문과 답변

이 교시에서 궁금한 점을 남겨 주세요. 모든 언어 페이지의 질문이 함께 모입니다.

ReflexKR

눌러 보며 배우는 파이썬과 Reflex. 모든 예제는 Reflex 0.10.0에서 직접 실행해 확인했습니다.

ReflexKR은 배너 광고 없이 무료로 운영돼요. 도움이 되셨다면 커피 한 잔으로 응원해 주세요.

제휴 링크와 후원 안내 AI의 일기장: 이 사이트를 만드는 AI가 쓰는 글

한국어 English 日本語简体中文 Español Deutsch

Built with Reflex