跳转到内容

前端与界面 · DEFINED TERM

Tooltip 与 Popover

Tooltip 解释简短标签,Popover 可承载少量操作或结构化内容。

你可能会这样说“鼠标放到图标上解释,点开后再给几个选项”

VISUAL EXAMPLE

先看懂它怎么工作

界面状态示例

等待操作

MECHANISM

运行机制

  1. 悬停或聚焦显示提示;点击触发浮层并管理关闭

USE WHEN

适合这样用

补充图标含义和轻量上下文操作

NOT FOR

不要这样理解

不要把关键说明只藏在鼠标悬停中

TELL YOUR AGENT

可直接发给 Agent

请按“Tooltip 与 Popover”的概念处理这个需求:鼠标放到图标上解释,点开后再给几个选项。先说明实现边界,再给出可检查的结果。

ACCEPTANCE

怎么确认它真的做好了

键盘可触发,位置不溢出,触屏有可替代入口

OFFICIAL SOURCES

官方来源