组件工坊：Reflex 组件库 100 例
·
课程概览
布局
·
Box
·
Flex
·
Stack
·
Grid
·
Container
·
Section
·
Center
·
Spacer
·
Separator
·
Card
·
Inset
·
Aspect Ratio
·
Fragment
排版
·
Text
·
Heading
·
Link
·
Code
·
Markdown
·
Blockquote
·
Quote
·
Strong
·
Em
·
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
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
4
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,
)| 属性 | 取值 | 默认值 | 用途 |
|---|---|---|---|
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，并把新的打开状态（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，打开与否就由代码决定。这时必须同时绑定 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）。用 State 控制 open 时，一定要同时绑定它。
工具提示只是辅助说明。必须知道的内容或需要点击的操作，请放进 Popover 或 Dialog。
订阅新课时和新课程通知
本课程新增课时或推出后续课程时，我们会发邮件通知你。
问答
关于本课有任何疑问都可以在这里留言。所有语言版本页面的提问会汇集在一起。