辅助 · 19 / 21
Tooltip st-tooltip
给按钮、图标按钮或任意可聚焦元素挂一条纯文本提示。悬停与键盘聚焦都能触发；气泡 fixed 定位，上方空间不足时自动翻到下方。
基础用法
默认插槽放触发元素，content 写提示文本。气泡使用 inverse-surface 反色底，与触发器相距 7px；触发器可以是按钮、图标按钮或任意元素。
LIVE
content + 默认插槽示例代码
<st-tooltip content="删除这条记录">
<st-button variant="outlined">悬停 / 聚焦我</st-button>
</st-tooltip>
<st-tooltip content="复制链接">
<st-icon-button title="复制" variant="outlined">⧉</st-icon-button>
</st-tooltip>悬停、聚焦与 Escape
pointerenter / pointerleave 自动开合；focusin / focusout 让键盘用户也能看到提示；按 Escape 立即关闭。气泡 pointer-events: none，不会挡住触发器的点击。
LIVE
hover / focusin / Escape示例代码（键盘可访问）
<st-tooltip content="用 Tab 移动到这里会显示提示">
<st-button variant="outlined">Tab 聚焦我</st-button>
</st-tooltip>
<!-- 输入框本身可聚焦，focusin / focusout 自动触发 -->
<st-tooltip content="邮箱用于接收登录验证码">
<st-input placeholder="邮箱地址"></st-input>
</st-tooltip>长文本与纯文本渲染
content 通过 textContent 写入，HTML 标签会被原样显示而不是解析，天然防注入。气泡最大宽度 20em，超出自动折行；换行符不会生效。
LIVE
长文本 / HTML 转义示例代码
<!-- 纯文本：HTML 标签原样显示；长文本自动折行 -->
<st-tooltip content="<b>不会加粗</b>，这段长文本会在 20em 内折行">
<st-button variant="outlined">长文本提示</st-button>
</st-tooltip>
<!-- 换行符 \n 会被折叠成空格，不要依赖它排版 -->
<st-tooltip content="第一行 第二行">...</st-tooltip>自适应定位
气泡默认在触发器上方居中；视口顶部放不下时自动翻到下方，水平方向夹在视口内。组件没有 placement 属性，方向完全由当前视口空间决定。
LIVE
fixed 定位 · 自动翻转示例代码
<!-- 无需指定方向：气泡按视口空间自动翻转、水平夹取 -->
<st-tooltip content="靠近页面顶部时，气泡会翻到触发器下方">
<st-button variant="outlined">靠近顶部</st-button>
</st-tooltip>受控 open 与 disabled
open 是运行时状态而非标签属性：用 sync:open 双向绑定后，既能从外部打开，也能拿到悬停 / 聚焦产生的状态。disabled 会彻底关闭提示，悬停和聚焦都不再响应。
LIVE
sync:open / disabled示例代码（sync:open）
<st-tooltip content="由外部按钮控制显示" sync:open="tipOpen">
<st-button variant="outlined">受控提示</st-button>
</st-tooltip>
<st-button variant="text" on:click="tipOpen = !tipOpen">切换提示</st-button>
<!-- data -->
<script>
export default async () => ({
data: { tipOpen: false },
});
</script>字号与外观
气泡字号是宿主 font-size 的 0.857em，最大宽度 20em；只改 font-size 就能整体缩放。气泡配色来自 inverse-surface / inverse-on-surface 角色，切换深浅色时自动跟随。
LIVE
font-size示例代码
<st-tooltip content="宿主 18px，气泡同步放大" style="font-size: 18px;">
<st-button variant="tonal">放大</st-button>
</st-tooltip>属性
| 属性 | 类型 | 默认 | 说明 |
|---|---|---|---|
content | string | 无 | 提示文本，纯文本渲染；长文本自动折行 |
disabled | boolean | 无 | 禁用提示，悬停 / 聚焦都不响应 |
open | data boolean | false | 运行时状态，用 sync:open 双向绑定 |
插槽 / 事件 / 注意
- 插槽：默认插槽放触发元素，任意元素均可。
- 触发：
pointerenter/focusin显示，pointerleave/focusout隐藏。 - 定位：fixed 定位，上方放不下自动翻到下方，左右夹在视口内；没有 placement 属性。
- 气泡
pointer-events: none，不会拦截下方交互。 - 触屏没有悬停；关键信息不要只放在提示里。