ReflexKR

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`	イベント	-	ツールチップの外を押したとき

4つの方向

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

触って学ぶPythonとReflex。すべての例はReflex 0.10.0で実際に動かして確認しています。

ReflexKRはバナー広告なし・無料で運営しています。役に立ったら、コーヒー一杯で応援してください。 ☕ コーヒーで応援する

アフィリエイトと支援について

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

Built with Reflex