总站首页
首页
目录
Koffi中文文档
video.js中文文档
KubeJS中文文档
总站首页
首页
目录
Koffi中文文档
video.js中文文档
KubeJS中文文档
Npmlibrary

Tooltip

预计阅读时间: 4 分钟

在悬停和聚焦时显示上下文标签的工具提示组件。

结构

<Tooltip.Provider>
  <Tooltip.Root>
    <Tooltip.Trigger>Hover me</Tooltip.Trigger>
    <Tooltip.Popup>
      <Tooltip.Arrow />
      Label text
    </Tooltip.Popup>
  </Tooltip.Root>
</Tooltip.Provider>

行为

显示锚定到触发元素的短标签。在悬停时经过可配置的 delay（默认 600ms）后打开，或在聚焦时立即打开。当指针离开或焦点移开时关闭，带有可选的 closeDelay。

side 和 align 属性控制相对于触发器的位置。定位在支持的地方使用 CSS Anchor Positioning，并有 JavaScript 测量回退。

组件由四个部分组成：Root 管理状态和上下文，Trigger 渲染激活工具提示的按钮，Popup 包含标签内容，Arrow 渲染装饰性指针。将多个工具提示包裹在 Tooltip.Provider 中以协调一组工具提示的打开/关闭时序 — 一旦工具提示变为可见，相邻的工具提示在 timeout 窗口内即时打开，跳过正常的 delay。

样式

使用 CSS 自定义属性设置定位偏移：

.tooltip-popup {
  --media-tooltip-side-offset: 8px;
  --media-tooltip-align-offset: 0px;
}

根据打开状态和过渡阶段设置样式：

.tooltip-popup[data-open] {
  display: block;
}
.tooltip-popup[data-starting-style] {
  opacity: 0;
}
.tooltip-popup[data-ending-style] {
  opacity: 0;
}
.tooltip-popup[data-side="top"] {
  transform-origin: bottom center;
}
.tooltip-popup[data-side="bottom"] {
  transform-origin: top center;
}

无障碍

触发器在打开时接收指向弹出框的 aria-describedby。弹出框渲染 role="tooltip" 和 popover="manual"。工具提示在聚焦时打开，在焦点离开时关闭，确保仅使用键盘的用户可以访问标签。

示例

基本用法

import { Tooltip } from '@videojs/react';

function LabeledButton() {
  return (
    <Tooltip.Root>
      <Tooltip.Trigger>Play</Tooltip.Trigger>
      <Tooltip.Popup>
        <Tooltip.Arrow />
        Play video
      </Tooltip.Popup>
    </Tooltip.Root>
  );
}

分组

将多个工具提示包裹在 Tooltip.Provider 中以共享延迟组。一旦工具提示变为可见，相邻的工具提示在 timeout 窗口内即时打开，跳过正常的 delay。

<Tooltip.Provider>
  <Tooltip.Root>
    <Tooltip.Trigger>Play</Tooltip.Trigger>
    <Tooltip.Popup>Play</Tooltip.Popup>
  </Tooltip.Root>
  <Tooltip.Root>
    <Tooltip.Trigger>Mute</Tooltip.Trigger>
    <Tooltip.Popup>Mute</Tooltip.Popup>
  </Tooltip.Root>
</Tooltip.Provider>

API 参考

复合组件

部件描述
Tooltip.Provider延迟组协调器，管理共享时序
Tooltip.Root工具提示根组件，管理状态和上下文
Tooltip.Trigger触发按钮，激活工具提示
Tooltip.Popup工具提示内容容器
Tooltip.Arrow装饰性方向箭头

Tooltip.Root 属性

属性类型默认值描述
side"top" | "right" | "bottom" | "left""top"工具提示相对于触发器的位置
align"start" | "center" | "end""center"工具提示的对齐方式
delaynumber600打开延迟（毫秒）
closeDelaynumber0关闭延迟（毫秒）

Tooltip.Provider 属性

属性类型默认值描述
delaynumber600组内工具提示的默认打开延迟
closeDelaynumber0组内工具提示的默认关闭延迟
timeoutnumber-延迟组超时窗口（毫秒）

状态

状态类型描述
openboolean工具提示是否打开

Data 属性

属性值描述
data-open-工具提示打开时存在
data-side"top" | "right" | "bottom" | "left"工具提示当前所在的一侧
data-align"start" | "center" | "end"工具提示的对齐方式
data-starting-style-打开动画开始时存在
data-ending-style-关闭动画开始时存在

CSS 自定义属性

属性描述
--media-tooltip-side-offset工具提示与触发器之间的侧边偏移
--media-tooltip-align-offset工具提示与触发器之间的对齐偏移

参见

目录