尧图网页设计 
gpui-kit 深度解析用 gpui-base 构建无样式 Tooltip 原语——延迟、定位与可访问性全指南【免费下载链接】gpui-kitRust GUI components for building fantastic cross-platform desktop application by using GPUI.项目地址: https://gitcode.com/GitHub_Trending/gp/gpui-kit导读Tooltip工具提示是桌面应用中延迟出现、随触发元素定位的描述性提示是交互界面中最常见也最容易被忽视的基础原语之一。本指南以 website/base/primitives/tooltip.md 为骨架结合 gpui-kit 仓库中gpui-base的实际源码crates/base/src/tooltip.rs与可运行示例完整讲解 Tooltip 的组装方式、受控状态管理、500ms 延迟/300ms 宽限的生命周期机制、视口感知的自动翻转定位、浮层优先级以及可访问性要求。读完本文你将能够在自己基于 GPUI 的应用中独立组合出符合设计系统要求的 Tooltip并理解其底层行为边界。与 gpui-kit 中所有gpui-base原语一致Tooltip 只提供行为与语义结构不施加任何产品视觉语言——外观完全交由 GPUI 样式Styled与组合导出件composed parts决定这正是它能够适配任意设计系统的原因。快速运行一行命令跑起来文档提供的原生入口是 crates/base/examples/native/src/bin/components.rs它从命令行接收组件名从共享 showcase 中选择对应示例。同一个 showcase 也会被编译为 WASM 预览。运行 Tooltip 示例cargo run -p gpui-base-examples -- tooltip该命令完成应用初始化、窗口创建与共享BaseShowcase状态见 crates/base/examples/showcase/mod.rs。Tooltip 的原生与浏览器WASM预览编译的是同一份源文件 crates/base/examples/showcase/components/tooltip.rs。导入use gpui_kit::base::{Tooltip};gpui-base在 crates/base/src/lib.rs 统一导出Tooltip, TooltipOverlay, TooltipPositioner, TooltipRequest, TooltipTransition五个与 Tooltip 相关的类型同时导出Align, Positioner, ResolvedPositioncrates/base/src/lib.rs供浮层定位使用。Anatomy 与 API组合视角下的部件拆分示例通过组合Tooltip构建提示内容。GPUI 的标准样式与事件 trait 提供呈现层这些 base 类型提供交互结构。从 crates/base/src/tooltip.rs 可以看到整个模块由五个职责清晰的部分组成类型职责对应 Base UI 概念Tooltip提示内容容器持有可访问角色Role::TooltipTooltip.PopupTooltipRequest触发方向覆盖层请求的内容构建闭包 触发器包围盒 首选方位Tooltip.Trigger的内容声明TooltipTransition呈现层收到的进入/切换动画描述动画生命周期TooltipOverlay每窗口的提示提供者与浮层管理延迟、宽限与切换Tooltip.Root状态机TooltipPositioner无样式的定位器视口感知翻转与钳制定位层Tooltip本身的实现极简——它只是一个持有Role::Tooltip角色的有状态divpub struct Tooltip { base: StatefulDiv, } impl Tooltip { pub fn new(id: impl IntoElementId) - Self { Self { base: div().id(id).role(Role::Tooltip), } } }它实现了Styled、ParentElement与RenderOnce因此可以像普通 GPUI 元素一样链式设置样式与子元素。TooltipRequest携带触发器的trigger_bounds与内容构建闭包并可通过placement(placement: Placement)声明首选方位pub struct TooltipRequest { build: TooltipBuilder, trigger_bounds: BoundsPixels, preferred_placement: OptionPlacement, } impl TooltipRequest { pub fn new( trigger_bounds: BoundsPixels, build: impl Fn(mut Window, mut App) - AnyView static, ) - Self; pub fn placement(mut self, placement: Placement) - Self; }Placement定义在 crates/base/src/geometry.rs仅包含Top、Bottom、Left、Right四个方向并提供了is_horizontal()、is_vertical()、axis()辅助方法。状态与事件受控模式是推荐用法Hover悬停或 focus聚焦会调度提示显示exit离开或 blur失焦则调度隐藏内容应当是描述性的descriptive不应承载必须操作才能继续的控件。文档强调将受控状态保存在父级 render 类型或 GPUI entity 中。在回调中更新状态后必须调用cx.notify()触发重绘不要在每个 render 周期中重建持久 entity。示例 crates/base/examples/showcase/components/tooltip.rs 展示了这一模式用一个降级downgrade的 entity 引用在on_hover回调中写入tooltip_visiblelet visible self.tooltip_visible; let entity cx.entity().downgrade(); let trigger div() .id(tooltip-trigger) .on_hover(move |hovered, _, cx| { _ entity.update(cx, |this, cx| { this.tooltip_visible *hovered; cx.notify(); }); }) .child(/* 触发按钮 */);随后在 render 中依据visible决定是否注入Tooltip内容结合when条件构造Popup::new(example-tooltip-popup, trigger) .text_xs() .when(visible, |this| { this.content( Tooltip::new(example-tooltip) .px_2() .h_7() .flex() .items_center() .justify_center() .border_1() .border_color(super::example_rgb(0x171717)) .bg(super::example_rgb(0x171717)) .text_color(super::example_rgb(0xffffff)) .child(Open command menu · ⌘K), ) })注意示例中使用Popup作为托管宿主host它负责测量触发器、首帧同步、延迟渲染与窗口边缘吸附见 crates/base/src/popup.rs而 Tooltip 内容本身则是不拦截鼠标的纯展示层。完整 Rust 示例以下是 showcase 实际使用的完整实现原文 crates/base/examples/showcase/components/tooltip.rsuse super::*; impl BaseShowcase { pub(in super::super) fn tooltip(self, cx: mut ContextSelf) - impl IntoElement { let visible self.tooltip_visible; let entity cx.entity().downgrade(); let trigger div() .id(tooltip-trigger) .on_hover(move |hovered, _, cx| { _ entity.update(cx, |this, cx| { this.tooltip_visible *hovered; cx.notify(); }); }) .child( Button::new(tooltip-anchor) .h_7() .px_2() .flex() .items_center() .justify_center() .border_1() .border_color(super::example_rgb(0x171717)) .bg(super::example_rgb(0xffffff)) .child(Command menu), ); Popup::new(example-tooltip-popup, trigger) .text_xs() .when(visible, |this| { this.content( Tooltip::new(example-tooltip) .px_2() .h_7() .flex() .items_center() .justify_center() .border_1() .border_color(super::example_rgb(0x171717)) .bg(super::example_rgb(0x171717)) .text_color(super::example_rgb(0xffffff)) .child(Open command menu · ⌘K), ) }) } }核心流程一句话概括on_hover写入受控状态 →cx.notify()触发重绘 → 条件性地把Tooltip内容挂到Popup上。上面的cargo run -p gpui-base-examples -- tooltip命令则负责提供应用初始化、窗口创建与共享的BaseShowcase状态。源码级原理延迟、宽限与切换的三段式生命周期TooltipOverlaycrates/base/src/tooltip.rs是行为核心。模块顶部定义了一组关键常量const TOOLTIP_PRIORITY: usize 200; const WINDOW_MARGIN: Pixels px(4.); const GRACE_PERIOD: Duration Duration::from_millis(300); const SHOW_DELAY: Duration Duration::from_millis(500);SHOW_DELAY 500ms首次显示前的延迟。request_show通过cx.spawn_in启动后台定时器等待 500ms 后若epoch未变才真正写入内容并cx.notify()crates/base/src/tooltip.rs。GRACE_PERIOD 300ms隐藏前的宽限期。request_hide同样使用定时器让指针短暂移出时不至于立刻消失——这正是悬停在触发元素与提示之间小空隙时提示不闪断的原因crates/base/src/tooltip.rs。epoch 机制每次 show/hide 请求都会推进 epoch异步任务在恢复时校验this.epoch epoch从而丢弃过期的调度防止竞态。切换switch若提示已可见或刚刚出现过had_recent_tooltip新的请求会立即生效而非等待 500ms并以is_switching标记进入TooltipTransition::Switch携带新旧 trigger bounds否则是TooltipTransition::Enter。render_with允许宿主注入自定义渲染器用TooltipTransition驱动进入/切换动画crates/base/src/tooltip.rs。hide()则是无条件清理清空内容、边界、任务并通知重绘适合组件卸载或窗口切换等场景。定位视口感知的翻转与钳制TooltipPositioner是共享定位器 crates/base/src/positioner.rs 的侧面side定位视图pub struct TooltipPositioner(Positioner); impl TooltipPositioner { pub fn new(trigger_bounds: BoundsPixels) - Self { Self(Positioner::side(trigger_bounds).margin(WINDOW_MARGIN)) } pub fn placement(mut self, placement: Placement) - Self { self.0 self.0.placement(placement); self } }Positioner::side默认对齐为Align::Center、偏移为 0间距为 4px与窗口边缘保持的最小距离。渲染时TooltipOverlay::render把定位器包进deferred(...)并赋予TOOLTIP_PRIORITY200优先级deferred( TooltipPositioner::new(content.trigger_bounds) .when_some(content.preferred_placement, |this, placement| { this.placement(placement) }) .child(rendered), ) .with_priority(TOOLTIP_PRIORITY)定位解析resolve_placementcrates/base/src/positioner.rs遵循先满足首选侧放不下翻转到对侧两侧都不够则选择空间更大的一侧最后钳制进视口的决策链clamp保证提示与窗口边缘至少保持margin默认 4px。Positioner 的测试覆盖了这些行为首选侧放得下时保持首选侧prefers_the_requested_side_when_it_fits、放不下时翻转到对侧flips_to_the_opposite_side_when_the_preferred_side_does_not_fit、翻转后仍钳制进视口clamps_into_the_viewport_while_keeping_the_flipped_side以及对齐的 Start/Center/End 三档边缘选择alignment_selects_the_leading_center_or_trailing_edge。positioner.rs 中还保留了从 tooltip 模块迁移过来的专门测试如prefers_above_when_space_allows、flips_and_clamps_on_each_axis证明合并后 Tooltip 的定位行为未发生变化。层级优先级Tooltip 高于 PopupTOOLTIP_PRIORITY 200高于 crates/base/src/popup.rs 定义的POPUP_PRIORITY 100保证 Tooltip 浮层位于普通 Popup 浮层之上。这一点有测试直接断言#[test] fn tooltip_priority_exceeds_popup_layer() { assert!(TOOLTIP_PRIORITY crate::POPUP_PRIORITY); }另一个关键设计Tooltip 的定位器默认不拦截鼠标Positioner::occlude默认关闭。定位器文档注释解释了原因——一个吞掉指针的 tooltip 会让承载它的 trigger 失去 hover 状态从而立刻关闭自身。而交互式浮层popover、menu、dropdown则应当开启occlude()见 crates/base/src/positioner.rs。生命周期测试验证模块内置的 gpui 测试provider_owns_grace_switch_and_dismisscrates/base/src/tooltip.rs验证了三条行为契约在had_recent_tooltip状态下调用request_show内容立即出现宽限切换路径不经过 500ms 延迟调用hide()后内容立即清空状态变更均触发notify。这与文档中hover 调度、exit 取消、切换立即生效的行为描述一一对应。Accessibility键盘可达性与语义Focus 也要触发除 hover 外trigger 获得焦点focus同样应调度显示保证纯键盘用户可感知提示。提示是补充信息Tooltip 只补充名称/含义不应包含必须交互才能完成任务的控件——tooltips supplement names and contain no required controls。源码层面对语义的落实是Tooltip::new中role(Role::Tooltip)它让提示内容在无障碍树中拥有正确角色见 crates/base/src/tooltip.rs。Notes接入设计系统时的检查清单文档要求在消费方设计系统中逐一验证以下状态的外观在能接受稳定元素 ID 的地方使用稳定 IDTooltip::new(example-tooltip)中的 ID 即为此用途用于定位、测试与无障碍关联逐一检查focus、hover、active、selected、disabled五种状态检查reduced-motion减少动效与high-contrast高对比度两种系统偏好下的表现。由于TooltipTransition的Enter/Switch变体显式携带动画纪元epoch与前后 bounds实现入场/切换动画时可直接消费这些数据同时配合系统 reduce-motion 偏好降级为即时显隐。小结gpui-base 的 Tooltip 是一个行为完整、样式为零的浮层原语Tooltip提供语义容器TooltipOverlay内置 500ms 延迟、300ms 宽限与即时切换的生命周期TooltipPositioner复用共享Positioner提供视口感知的翻转/钳制定位TOOLTIP_PRIORITY200保证浮层层级Role::Tooltip落实可访问性语义。在真实应用中你只需要持有受控状态、在on_hover/focus 回调中更新并cx.notify()、条件性地组合Popup Tooltip再套用 GPUI 样式即可接入任意设计系统。更完整的可运行示例与 WASM 预览入口位于 crates/base/examples/showcase/components/tooltip.rs底层实现可继续阅读 crates/base/src/tooltip.rs 与 crates/base/src/positioner.rs。【免费下载链接】gpui-kitRust GUI components for building fantastic cross-platform desktop application by using GPUI.项目地址: https://gitcode.com/GitHub_Trending/gp/gpui-kit创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 gpui-kit 深度解析：用 gpui-base 构建无样式 Tooltip 原语——延迟、定位与可访问性全指南
gpui-kit 深度解析用 gpui-base 构建无样式 Tooltip 原语——延迟、定位与可访问性全指南【免费下载链接】gpui-kitRust GUI components for building fantastic cross-platform desktop application by using GPUI.项目地址: https://gitcode.com/GitHub_Trending/gp/gpui-kit导读Tooltip工具提示是桌面应用中延迟出现、随触发元素定位的描述性提示是交互界面中最常见也最容易被忽视的基础原语之一。本指南以 website/base/primitives/tooltip.md 为骨架结合 gpui-kit 仓库中gpui-base的实际源码crates/base/src/tooltip.rs与可运行示例完整讲解 Tooltip 的组装方式、受控状态管理、500ms 延迟/300ms 宽限的生命周期机制、视口感知的自动翻转定位、浮层优先级以及可访问性要求。读完本文你将能够在自己基于 GPUI 的应用中独立组合出符合设计系统要求的 Tooltip并理解其底层行为边界。与 gpui-kit 中所有gpui-base原语一致Tooltip 只提供行为与语义结构不施加任何产品视觉语言——外观完全交由 GPUI 样式Styled与组合导出件composed parts决定这正是它能够适配任意设计系统的原因。快速运行一行命令跑起来文档提供的原生入口是 crates/base/examples/native/src/bin/components.rs它从命令行接收组件名从共享 showcase 中选择对应示例。同一个 showcase 也会被编译为 WASM 预览。运行 Tooltip 示例cargo run -p gpui-base-examples -- tooltip该命令完成应用初始化、窗口创建与共享BaseShowcase状态见 crates/base/examples/showcase/mod.rs。Tooltip 的原生与浏览器WASM预览编译的是同一份源文件 crates/base/examples/showcase/components/tooltip.rs。导入use gpui_kit::base::{Tooltip};gpui-base在 crates/base/src/lib.rs 统一导出Tooltip, TooltipOverlay, TooltipPositioner, TooltipRequest, TooltipTransition五个与 Tooltip 相关的类型同时导出Align, Positioner, ResolvedPositioncrates/base/src/lib.rs供浮层定位使用。Anatomy 与 API组合视角下的部件拆分示例通过组合Tooltip构建提示内容。GPUI 的标准样式与事件 trait 提供呈现层这些 base 类型提供交互结构。从 crates/base/src/tooltip.rs 可以看到整个模块由五个职责清晰的部分组成类型职责对应 Base UI 概念Tooltip提示内容容器持有可访问角色Role::TooltipTooltip.PopupTooltipRequest触发方向覆盖层请求的内容构建闭包 触发器包围盒 首选方位Tooltip.Trigger的内容声明TooltipTransition呈现层收到的进入/切换动画描述动画生命周期TooltipOverlay每窗口的提示提供者与浮层管理延迟、宽限与切换Tooltip.Root状态机TooltipPositioner无样式的定位器视口感知翻转与钳制定位层Tooltip本身的实现极简——它只是一个持有Role::Tooltip角色的有状态divpub struct Tooltip { base: StatefulDiv, } impl Tooltip { pub fn new(id: impl IntoElementId) - Self { Self { base: div().id(id).role(Role::Tooltip), } } }它实现了Styled、ParentElement与RenderOnce因此可以像普通 GPUI 元素一样链式设置样式与子元素。TooltipRequest携带触发器的trigger_bounds与内容构建闭包并可通过placement(placement: Placement)声明首选方位pub struct TooltipRequest { build: TooltipBuilder, trigger_bounds: BoundsPixels, preferred_placement: OptionPlacement, } impl TooltipRequest { pub fn new( trigger_bounds: BoundsPixels, build: impl Fn(mut Window, mut App) - AnyView static, ) - Self; pub fn placement(mut self, placement: Placement) - Self; }Placement定义在 crates/base/src/geometry.rs仅包含Top、Bottom、Left、Right四个方向并提供了is_horizontal()、is_vertical()、axis()辅助方法。状态与事件受控模式是推荐用法Hover悬停或 focus聚焦会调度提示显示exit离开或 blur失焦则调度隐藏内容应当是描述性的descriptive不应承载必须操作才能继续的控件。文档强调将受控状态保存在父级 render 类型或 GPUI entity 中。在回调中更新状态后必须调用cx.notify()触发重绘不要在每个 render 周期中重建持久 entity。示例 crates/base/examples/showcase/components/tooltip.rs 展示了这一模式用一个降级downgrade的 entity 引用在on_hover回调中写入tooltip_visiblelet visible self.tooltip_visible; let entity cx.entity().downgrade(); let trigger div() .id(tooltip-trigger) .on_hover(move |hovered, _, cx| { _ entity.update(cx, |this, cx| { this.tooltip_visible *hovered; cx.notify(); }); }) .child(/* 触发按钮 */);随后在 render 中依据visible决定是否注入Tooltip内容结合when条件构造Popup::new(example-tooltip-popup, trigger) .text_xs() .when(visible, |this| { this.content( Tooltip::new(example-tooltip) .px_2() .h_7() .flex() .items_center() .justify_center() .border_1() .border_color(super::example_rgb(0x171717)) .bg(super::example_rgb(0x171717)) .text_color(super::example_rgb(0xffffff)) .child(Open command menu · ⌘K), ) })注意示例中使用Popup作为托管宿主host它负责测量触发器、首帧同步、延迟渲染与窗口边缘吸附见 crates/base/src/popup.rs而 Tooltip 内容本身则是不拦截鼠标的纯展示层。完整 Rust 示例以下是 showcase 实际使用的完整实现原文 crates/base/examples/showcase/components/tooltip.rsuse super::*; impl BaseShowcase { pub(in super::super) fn tooltip(self, cx: mut ContextSelf) - impl IntoElement { let visible self.tooltip_visible; let entity cx.entity().downgrade(); let trigger div() .id(tooltip-trigger) .on_hover(move |hovered, _, cx| { _ entity.update(cx, |this, cx| { this.tooltip_visible *hovered; cx.notify(); }); }) .child( Button::new(tooltip-anchor) .h_7() .px_2() .flex() .items_center() .justify_center() .border_1() .border_color(super::example_rgb(0x171717)) .bg(super::example_rgb(0xffffff)) .child(Command menu), ); Popup::new(example-tooltip-popup, trigger) .text_xs() .when(visible, |this| { this.content( Tooltip::new(example-tooltip) .px_2() .h_7() .flex() .items_center() .justify_center() .border_1() .border_color(super::example_rgb(0x171717)) .bg(super::example_rgb(0x171717)) .text_color(super::example_rgb(0xffffff)) .child(Open command menu · ⌘K), ) }) } }核心流程一句话概括on_hover写入受控状态 →cx.notify()触发重绘 → 条件性地把Tooltip内容挂到Popup上。上面的cargo run -p gpui-base-examples -- tooltip命令则负责提供应用初始化、窗口创建与共享的BaseShowcase状态。源码级原理延迟、宽限与切换的三段式生命周期TooltipOverlaycrates/base/src/tooltip.rs是行为核心。模块顶部定义了一组关键常量const TOOLTIP_PRIORITY: usize 200; const WINDOW_MARGIN: Pixels px(4.); const GRACE_PERIOD: Duration Duration::from_millis(300); const SHOW_DELAY: Duration Duration::from_millis(500);SHOW_DELAY 500ms首次显示前的延迟。request_show通过cx.spawn_in启动后台定时器等待 500ms 后若epoch未变才真正写入内容并cx.notify()crates/base/src/tooltip.rs。GRACE_PERIOD 300ms隐藏前的宽限期。request_hide同样使用定时器让指针短暂移出时不至于立刻消失——这正是悬停在触发元素与提示之间小空隙时提示不闪断的原因crates/base/src/tooltip.rs。epoch 机制每次 show/hide 请求都会推进 epoch异步任务在恢复时校验this.epoch epoch从而丢弃过期的调度防止竞态。切换switch若提示已可见或刚刚出现过had_recent_tooltip新的请求会立即生效而非等待 500ms并以is_switching标记进入TooltipTransition::Switch携带新旧 trigger bounds否则是TooltipTransition::Enter。render_with允许宿主注入自定义渲染器用TooltipTransition驱动进入/切换动画crates/base/src/tooltip.rs。hide()则是无条件清理清空内容、边界、任务并通知重绘适合组件卸载或窗口切换等场景。定位视口感知的翻转与钳制TooltipPositioner是共享定位器 crates/base/src/positioner.rs 的侧面side定位视图pub struct TooltipPositioner(Positioner); impl TooltipPositioner { pub fn new(trigger_bounds: BoundsPixels) - Self { Self(Positioner::side(trigger_bounds).margin(WINDOW_MARGIN)) } pub fn placement(mut self, placement: Placement) - Self { self.0 self.0.placement(placement); self } }Positioner::side默认对齐为Align::Center、偏移为 0间距为 4px与窗口边缘保持的最小距离。渲染时TooltipOverlay::render把定位器包进deferred(...)并赋予TOOLTIP_PRIORITY200优先级deferred( TooltipPositioner::new(content.trigger_bounds) .when_some(content.preferred_placement, |this, placement| { this.placement(placement) }) .child(rendered), ) .with_priority(TOOLTIP_PRIORITY)定位解析resolve_placementcrates/base/src/positioner.rs遵循先满足首选侧放不下翻转到对侧两侧都不够则选择空间更大的一侧最后钳制进视口的决策链clamp保证提示与窗口边缘至少保持margin默认 4px。Positioner 的测试覆盖了这些行为首选侧放得下时保持首选侧prefers_the_requested_side_when_it_fits、放不下时翻转到对侧flips_to_the_opposite_side_when_the_preferred_side_does_not_fit、翻转后仍钳制进视口clamps_into_the_viewport_while_keeping_the_flipped_side以及对齐的 Start/Center/End 三档边缘选择alignment_selects_the_leading_center_or_trailing_edge。positioner.rs 中还保留了从 tooltip 模块迁移过来的专门测试如prefers_above_when_space_allows、flips_and_clamps_on_each_axis证明合并后 Tooltip 的定位行为未发生变化。层级优先级Tooltip 高于 PopupTOOLTIP_PRIORITY 200高于 crates/base/src/popup.rs 定义的POPUP_PRIORITY 100保证 Tooltip 浮层位于普通 Popup 浮层之上。这一点有测试直接断言#[test] fn tooltip_priority_exceeds_popup_layer() { assert!(TOOLTIP_PRIORITY crate::POPUP_PRIORITY); }另一个关键设计Tooltip 的定位器默认不拦截鼠标Positioner::occlude默认关闭。定位器文档注释解释了原因——一个吞掉指针的 tooltip 会让承载它的 trigger 失去 hover 状态从而立刻关闭自身。而交互式浮层popover、menu、dropdown则应当开启occlude()见 crates/base/src/positioner.rs。生命周期测试验证模块内置的 gpui 测试provider_owns_grace_switch_and_dismisscrates/base/src/tooltip.rs验证了三条行为契约在had_recent_tooltip状态下调用request_show内容立即出现宽限切换路径不经过 500ms 延迟调用hide()后内容立即清空状态变更均触发notify。这与文档中hover 调度、exit 取消、切换立即生效的行为描述一一对应。Accessibility键盘可达性与语义Focus 也要触发除 hover 外trigger 获得焦点focus同样应调度显示保证纯键盘用户可感知提示。提示是补充信息Tooltip 只补充名称/含义不应包含必须交互才能完成任务的控件——tooltips supplement names and contain no required controls。源码层面对语义的落实是Tooltip::new中role(Role::Tooltip)它让提示内容在无障碍树中拥有正确角色见 crates/base/src/tooltip.rs。Notes接入设计系统时的检查清单文档要求在消费方设计系统中逐一验证以下状态的外观在能接受稳定元素 ID 的地方使用稳定 IDTooltip::new(example-tooltip)中的 ID 即为此用途用于定位、测试与无障碍关联逐一检查focus、hover、active、selected、disabled五种状态检查reduced-motion减少动效与high-contrast高对比度两种系统偏好下的表现。由于TooltipTransition的Enter/Switch变体显式携带动画纪元epoch与前后 bounds实现入场/切换动画时可直接消费这些数据同时配合系统 reduce-motion 偏好降级为即时显隐。小结gpui-base 的 Tooltip 是一个行为完整、样式为零的浮层原语Tooltip提供语义容器TooltipOverlay内置 500ms 延迟、300ms 宽限与即时切换的生命周期TooltipPositioner复用共享Positioner提供视口感知的翻转/钳制定位TOOLTIP_PRIORITY200保证浮层层级Role::Tooltip落实可访问性语义。在真实应用中你只需要持有受控状态、在on_hover/focus 回调中更新并cx.notify()、条件性地组合Popup Tooltip再套用 GPUI 样式即可接入任意设计系统。更完整的可运行示例与 WASM 预览入口位于 crates/base/examples/showcase/components/tooltip.rs底层实现可继续阅读 crates/base/src/tooltip.rs 与 crates/base/src/positioner.rs。【免费下载链接】gpui-kitRust GUI components for building fantastic cross-platform desktop application by using GPUI.项目地址: https://gitcode.com/GitHub_Trending/gp/gpui-kit创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考