边缘自适
<div class="demo-row"> <button class="icen-btn" data-icen-tooltip="默认在上方">上</button> <button class="icen-btn" data-icen-tooltip="下方提示" data-icen-tooltip-side="bottom">下</button> <button class="icen-btn" data-icen-tooltip="左侧提示" data-icen-tooltip-side="left">左</button> <button class="icen-btn" data-icen-tooltip="右侧提示" data-icen-tooltip-side="right">右</button></div><div class="demo-row" style="margin-top:12px"> <button class="icen-btn" data-icen-tooltip="多行模式允许换行，适合一段完整说明，而不是一个短语。" data-icen-tooltip-multiline="true">多行</button> <span class="icen-tag" data-icen-tooltip="贴在视口边缘时会自动翻转并留在视野内">边缘自适</span></div>特性
- 声明：
data-icen-tooltip写文案；side/align/multiline控制方向与换行 - 时机：鼠标悬停延迟 400ms，键盘聚焦立即出现；离开、点击、Esc 或滚动即关闭
- 定位：portal 到 body，随视口空间翻转并避开边缘，祖先的 overflow 与圆角裁切不再影响
- 单例：全局至多一个；触屏不抢首次点按
无 JS 时 CSS 回退照常工作——提示不会因脚本失败而消失。
接口
- 初始化
initTooltip()（kit 一行入口可直接命名导入）- 导出
-
initTooltip - 类型
dist/behaviors/tooltip.d.mts（随 npm 包发布，含全部 JSDoc 约束）
安装
bun add @icen.ai/uipnpm add @icen.ai/uinpm install @icen.ai/uiyarn add @icen.ai/ui一行引入该组件（CSS 与 behavior 自动带上，无需关心内部 CSS 文件名）：
import { initTooltip } from '@icen.ai/ui/kit/tooltip';initTooltip();也可以用脚手架直接打印引入行：
bunx --bun @icen.ai/ui add tooltip
Astro 项目注意：kit 入口里的 CSS import 在页面 <script> 里会被 Astro 的 client bundle 摇掉——请改在布局 frontmatter 里引 CSS（import '@icen.ai/ui/components/tooltip.css';），JS 行为仍可走 kit。Vite SPA / webpack 项目无此问题。
用法
import { initTooltip } from '@icen.ai/ui/behaviors/tooltip';<button class="icen-btn" data-icen-tooltip="文案" data-icen-tooltip-side="top">目标</button><!-- side 可选 top | bottom | left | right；align 可选 start | end；multiline 允许多行 -->const dispose = initTooltip(); // 可省略容器；动态插入同样接入，宿主卸载时 dispose()// 气泡 portal 到 body：翻转/钳制不被祖先裁切；无 JS 时 CSS ::after 回退照常// hover 400ms 出现，键盘 :focus-visible 立即；离开 / 点击 / Escape / 滚动关闭