提示
tooltip
纯 CSS:data-tooltip 文案 + data-tooltip-side 方向;hover 延迟 400ms,键盘 focus-visible 立即出现。
示例
<div class="demo-row">
<button class="btn" data-tooltip="默认在上方">上</button>
<button class="btn" data-tooltip="下方提示" data-tooltip-side="bottom">下</button>
<button class="btn" data-tooltip="左侧提示" data-tooltip-side="left">左</button>
<button class="btn" data-tooltip="右侧提示" data-tooltip-side="right">右</button>
</div> 安装
bun add @icen.ai/ui
import '@icen.ai/ui/components/tooltip.css'; 用法
<!-- 纯 CSS:hover 延迟 400ms 出现,focus-visible 立即出现 -->
<button class="btn" data-tooltip="文案" data-tooltip-side="top">目标</button>
<!-- data-tooltip-side 可选 top | bottom | left | right -->