SepTooltip 统一提示组件 v1.1.1

渲染到 body 防 overflow 裁剪 · 12 方位 · focus/contextmenu · closable × · showArrow · offset · zIndex · DOM 内容 · ESC 关闭 · target 滚出视口自动隐藏 · 内容模板引用 title="#id" · 移动端自适应

1. trigger 触发模式（5 种：hover / click / focus / contextmenu / manual）

HTML 声明式标签 ↕
JS API 初始化
hover 触发
click 触发
focus 触发（点进来看看）
右键 contextmenu
manual 模式
按 ESC 键可关闭当前可见 tooltip

2. target 滚出视口自动隐藏（v1.1.1 新增 ✨）

JS API 初始化（手动 show + 滚动测试）

👉 操作步骤：① 点下方按钮 show() 让气泡弹出；② 用浏览器滚动条或滚轮向下滚动页面，让绿色按钮完全滚出视口（顶部/底部/左侧/右侧任意方向都行）；③ 观察气泡不会被孤零零钳制在视口边缘，而是跟随 target 自动隐藏。

🎯 我是 target，把我滚出视口看效果

⬆️ 上方 80vh 空白是为了让你方便测试滚动。判断规则：targetRect.bottom ≤ 0 || top ≥ vh || right ≤ 0 || left ≥ vw，必须 4 条边完全越界才隐藏（还剩 1px 可见时保留气泡，避免 flicker）。

3. type 类型样式（5 种） + closable × 关闭按钮

HTML 声明式标签 ↕
JS API 初始化
info 信息
success 成功
warning 警告
error 错误（pin 住不消失）
help 帮助
error pin 机制：type=error 时，气泡通过 show() 弹出后不会因鼠标离开 / blur 而自动消失。 关闭方式 4 种：① 右上角 ×、② 点击页面其他地方、③ 按 ESC、④ 调用 tip.hide() / setType 非 error。

4. placement 12 方位 + 自动翻转

HTML 声明式标签 ↕
JS API 初始化（12 方位全覆盖）

4 个居中方位：top / bottom / left / right；8 个角落方位：topLeft / topRight / bottomLeft / bottomRight / leftTop / leftBottom / rightTop / rightBottom。 贴边位置不够时自动翻转到对向（top ↔ bottom，left ↔ right，角落前缀保留）。

topLeft
top
topRight
leftTop
rightTop
left
right
leftBottom
rightBottom
bottomLeft
bottom
bottomRight
↑ top
← left
中心 Target
right →
↓ bottom

5. 细控配置：closable × / showArrow 箭头 / offset 间距 / zIndex 层级

HTML 声明式标签 ↕
JS API 初始化
closable=true（× 按钮）
closable=false（无 ×）
showArrow=true（有箭头）
showArrow=false（卡片无箭头）
offset=4px（紧贴）
offset=24px（远距离）
zIndex=12345678

6. DOM 内容 / HTML 富文本（setContent / title=HTMLElement）

HTML 声明式标签 ↕
内容模板引用 — title="#id"（任意元素 + id，克隆内容） ↕
hover 看模板引用 🔗
focus 弹模板引用 🔗
引用不存在的模板 ⚠️
JS API 初始化
hover 看 DOM 气泡
点我（focus 弹）选日期
hover 看彩色 HTML 气泡
JS API — 模板引用 setTitle("#id")
hover 看模板引用
focus 弹模板引用

7. JS API：setTitle / setContent / setType / setPlacement / closable / showArrow / offset / zIndex / show / hide / toggle / destroy / setState

HTML 声明式标签 ↕
JS API 初始化（动态操作演示）
JS API 目标元素

8. HTML 声明式标签（包裹任意元素）

HTML 声明式标签

9. 移动端自适应（≤640px 居中 + 全宽 + 简化方位）

HTML 声明式标签 ↕

💡 将浏览器窗口缩窄至 ≤640px 查看效果：tooltip 自动居中、全宽展示、箭头隐藏、left/right 方位强制转为 top/bottom。

10. 自动化断言