Tooltip 文字提示
简单的文字提示气泡，hover 或键盘聚焦触发。
基础用法
悬停触发
放置方向
四个方向
空间不足时自动沿主轴翻转，并在视口边缘避让。
箭头
默认显示指向触发元素边缘的箭头；arrow="false" 隐藏箭头；arrow-point-at-center 让箭头指向触发元素中心（视口边缘避让导致面板偏移时，箭头仍指向锚点中心）。
箭头显隐与指向
arrow-position="merge" 让箭头与面板角融合成直角三角尖（通用形态，仅 *-start / *-end placement 生效）：直角三角贴角、直角边与面板两边共线，尖端正交指向锚点所在侧。
箭头 merge 融合模式
视口边缘自动调整
默认空间不足时自动沿主轴翻转并避让视口边缘；auto-adjust-overflow="false" 关闭自动调整，面板保持声明 placement（可能溢出视口）。
关闭自动调整
聚焦触发
键盘聚焦触发
受控显示
open 属性受控：外部按钮设置 / 移除 open 即可显示 / 隐藏提示（hover / focus 触发仍叠加生效）。
受控显示（open 属性）
长文本
长文本与最大宽度
虚拟触发
虚拟模式（virtual）不绑定宿主触发元素：open 完全受外部控制，位置由 virtual-anchor（锚点元素选择器）或 virtual-x / virtual-y（视口坐标）指定，placement 仍生效。适合图表点位、拖拽中的浮层提示等无法用普通触发元素的场景。
虚拟锚点跟随（图表点位）
悬停任意点位查看提示（tooltip 锚定该点显示）。
坐标跟随（鼠标移动）
触发方式
trigger 属性支持空格分隔的多选组合：hover（悬停）/ focus（聚焦）/ click（点击）/ contextmenu（右键）/ touch（长按）/ manual（完全受控）。默认 hover focus。
点击触发
右键触发
手动触发（manual）
显示延迟
open-delay / close-delay 控制悬停显示/隐藏的延迟（ms），避免快速滑过时误触发。
显示延迟与隐藏延迟
连续在多个触发元素间快速移动时，skip-delay-duration（默认 300ms）会让下一个 tooltip 跳过 open-delay 立即显示，保持响应连贯。
延迟组（skip-delay-duration）
触屏设备上 trigger="touch" 长按显示（touch-delay 控制长按时长，默认 500ms）。
触屏长按触发
富内容
content 属性显示纯文本；需要富内容（链接、图标、多行）时用 slot="content" 插槽，插槽存在时优先于属性文本。
富内容插槽
键盘可达
打开状态下按 Esc 关闭，焦点还原到触发元素；打开时触发元素自动关联 aria-describedby 指向浮层（屏幕阅读器可读）。
Esc 关闭 + aria-describedby
trigger-keys 可指定按键（空格分隔）在聚焦时打开，如 trigger-keys="F1"。
trigger-keys 按键打开
最大宽度
默认最大宽度 240px（--oas-tooltip-max-width token 开口），max-width 属性可覆盖（数字或 CSS 长度）。
自定义最大宽度
禁用
disabled 时 tooltip 不显示（hover / 受控 open 均不生效）。
禁用
可悬停浮层
interactive 让浮层可悬停（鼠标移入浮层不关闭，浮层内链接可达）。
interactive 可悬停
偏移与碰撞
offset 控制主轴距离（默认 8px），skidding 控制交叉轴偏移，collision-padding 控制视口边缘避让边距（默认 4px）。
offset / skidding
collision-padding
颜色变体
color 属性支持语义色（primary / success / warning / danger）、11 预设名（如 magenta、blue）或任意 CSS 色值，全部走 token（含 dark 变体）。
颜色变体
挂载点
append-to 把浮层挂载到指定容器（body 或 CSS 选择器），脱离裁剪上下文（如 overflow: hidden 祖先）。
append-to body
自动关闭
auto-close（ms）在打开后自动关闭，适合引导提示等场景。
auto-close
新鲜内容
fresh 默认开启：关闭状态下内容变化也即时同步（再次打开所见即最新）；fresh="false" 时关闭期间冻结内容。
fresh 内容同步
边界
空内容
API
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
append-to | 浮层挂载点：body 或 CSS 选择器。把浮层移入目标容器的独立 shadow（样式作用域保真），脱离 overflow: hidden / transform 等裁剪上下文；挂载期间 ::part(tip) 无法从宿主穿透，定制走 CSS 变量或类选择器 | string | — |
arrow | 是否显示箭头（默认 true；arrow="false" 隐藏，箭头元素与 ::part(arrow) 保留） | string | true |
arrow-point-at-center | 箭头指向触发元素中心（默认指向触发元素边缘；视口边缘避让导致面板偏移时箭头仍指向锚点中心） | boolean | — |
arrow-position | 箭头形态：center（默认，箭头在面板边缘居中）/ merge（仅 *-start/*-end placement 生效，直角三角与面板角共边融合：直角贴角点、直角边与面板两边共线，尖端正交指向锚点，通用形态） | string | center |
auto-adjust-overflow | 视口边缘自动翻转与避让（默认 true；"false" 关闭，保持声明 placement，可能溢出视口） | string | true |
auto-close | 打开后自动关闭时长（ms），0 或缺省不自动关闭 | — | — |
close-delay | 隐藏延迟（ms，默认 0）：mouseleave/focusout 后延迟关闭 | — | — |
collision-padding | 视口边缘避让边距（px，默认 4）：浮层被视口夹取时与边缘保留的距离 | — | — |
color | 颜色变体：语义色 primary/success/warning/danger、11 预设名（如 magenta、blue）或任意 CSS 色值；全部走 token（含 dark 变体），箭头底色同步 | string | — |
content | 提示内容文本（slot="content" 富内容存在时优先于属性文本） | string | — |
disabled | 禁用：tooltip 不显示（hover / 受控 open 均不生效） | boolean | — |
fresh | 内容新鲜度（默认 true）：关闭期间内容变化也即时同步；"false" 时关闭期间冻结内容，再次打开才更新 | string | true |
interactive | 浮层可悬停：鼠标移入浮层不关闭（pointer-events: auto），浮层内链接可达 | boolean | — |
max-width | 浮层最大宽度（数字补 px 或 CSS 长度，默认走 --oas-tooltip-max-width token 240px） | string | — |
offset | 主轴距离（px，默认 8）：浮层与锚点沿主轴的间隔 | — | — |
open | 受控显示（布尔属性，存在即显示） | boolean | — |
open-delay | 显示延迟（ms，默认 0）：mouseenter/focusin 后延迟打开；skip-delay-duration 命中时跳过 | — | — |
placement | 浮层位置（12 向：top/bottom/left/right × start/center/end） | Placement | top |
skidding | 交叉轴偏移（px，默认 0）：top/bottom 系列沿水平轴（正右负左）、left/right 系列沿垂直轴（正下负上） | — | — |
skip-delay-duration | 全局延迟组阈值（ms，默认 300）：某 tooltip 关闭后这段时间内打开下一个 tooltip 时跳过 open-delay 立即显示（连续悬停响应连贯）；"0" 关闭该行为 | — | — |
touch-delay | touch 长按触发时长（ms，默认 500）：trigger 含 touch 时 pointerdown 长按到点打开，提前抬手/移出取消 | — | — |
trigger | 触发方式（空格分隔多选）：hover / focus / click / contextmenu / touch / manual，默认 hover focus；manual 完全受控 | string | hover focus |
trigger-keys | 指定按键（空格分隔，如 F1）：焦点在触发元素上时按该键打开 | string | — |
virtual | 虚拟触发模式：不绑定宿主触发元素，open 完全受外部控制，位置由 virtual-anchor 或 virtual-x/virtual-y 指定（适合图表点位、拖拽中的浮层提示） | boolean | — |
virtual-anchor | 虚拟锚点元素选择器（如 #chart-point-1），tooltip 按该元素矩形定位；与 virtual-x/virtual-y 二选一，坐标优先 | — | — |
virtual-x | 虚拟锚点视口 X 坐标（px，如鼠标 clientX），与 virtual-y 同时设置时按坐标定位 | — | — |
virtual-y | 虚拟锚点视口 Y 坐标（px，如鼠标 clientY），与 virtual-x 同时设置时按坐标定位 | — | — |
事件
| 事件 | 说明 |
|---|---|
oas-open-change | open 状态变化（显示/隐藏）时派发，detail: { open } |
插槽
| 名称 | 说明 |
|---|---|
| 默认 | 触发元素（hover/focus 触发）；virtual 虚拟模式下可省略 |
content | 富内容（存在时优先于 content 属性文本显示） |
oas-open-change：open 状态变化（显示/隐藏）时派发，detail: { open }。hover / focus 触发显隐；role="tooltip"，浮层 pointer-events: none 不拦截交互。