悬停说明
Tooltip
为已有控件补充简短说明，不承担主要信息。
按 / 聚焦组件搜索
app.mjs
import { mount } from '@sofish/ui/browser';
const view = mount(
document.querySelector('#example'),
'tooltip',
{
"label": "快捷键提示",
"content": "按 / 聚焦组件搜索"
}
);
// view.update({ ...nextProps });
// view.destroy();什么时候用
解释图标含义或不常用术语。
什么时候不用
包含按钮、表单或关键错误时，改用 Popover 或内联说明。
COMPONENT API
属性与事件
传入业务数据，通过事件连接你的应用。
| 属性 | 默认值 |
|---|---|
label | "复制链接" |
content | "复制当前条目的地址" |
事件
展示组件；通过 update(props) 更新内容。
INTERACTION NOTES
交互与可访问性
- 键盘聚焦也能显示，Escape 可关闭。
- 不把必要信息只放在悬停里。
和相似组件的区别
Tooltip 是辅助文字；Popover 可以包含需要操作的内容。
RESEARCH & ALTERNATIVES
官方实现映射
以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。
关键状态
React / Next.js、Vue / Nuxt、Svelte / SvelteKit · 来源核验