Components · Tooltip
下载

组件

Tooltip 工具提示

悬停 / 聚焦显示的轻提示；纯 CSS，无需 JS（Popover 为点击展开、可含标题）。

默认

将 pvs-tooltip__bubble 放在触发器内；鼠标悬停或键盘聚焦时显示。

12 轨 CSS Grid
<span class="pvs-tooltip">
  <button type="button" class="pvs-btn pvs-btn--ghost pvs-btn--sm pvs-tooltip__trigger" aria-describedby="tt-demo">栅格</button>
  <span class="pvs-tooltip__bubble" id="tt-demo" role="tooltip">12 轨 CSS Grid</span>
</span>

弹出方位

pvs-tooltip--top 向上；--start / --end 水平对齐。

TopEnd 对齐
<div class="pvs-flex pvs-gap-8 pvs-flex-wrap pvs-items-center" style="padding:4rem 0 2rem">
  <span class="pvs-tooltip pvs-tooltip--top">
    <button type="button" class="pvs-btn pvs-btn--outline pvs-btn--sm">向上</button>
    <span class="pvs-tooltip__bubble" role="tooltip">Top</span>
  </span>
  <span class="pvs-tooltip pvs-tooltip--end">
    <button type="button" class="pvs-btn pvs-btn--outline pvs-btn--sm">右对齐</button>
    <span class="pvs-tooltip__bubble" role="tooltip">End 对齐</span>
  </span>
</div>

类名速查

类名说明
pvs-tooltip根容器
pvs-tooltip__trigger触发元素（可选）
pvs-tooltip__bubble提示气泡
pvs-tooltip--top / --start / --end方位
role="tooltip" + aria-describedby无障碍建议