# @financial-times/o3-tooltip 中文文档

规范地址：https://npmcn.com/package/%40financial-times/o3-tooltip/

版本：3\.2\.2
npm 元数据更新时间：2026-10-06T13:40:05.668Z
中文译文更新时间：2026-11-14T19:46:10.971Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40financial-times/o3-tooltip
原文对照：https://npmcn.com/package/%40financial-times/o3-tooltip/?lang=original
项目主页：https://registry.origami.ft.com/components/o3-tooltip

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：40.1 kB，25 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：@financial-times/o3-foundation ^3\.0\.0
- 首次发布：2024-03-07T11:45:23.647Z
- 最新版本发布：2026-03-04T15:03:40.915Z
- 近 30 天下载量：2573（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：23（近 12 个月 3 个）

## 中文简介

提供视图感知工具提示,用于注释或突出产品UI的其他方面

## 安装

```sh
npm install @financial-times/o3-tooltip
```

也可以使用：`pnpm add @financial-times/o3-tooltip`、`yarn add @financial-times/o3-tooltip`、`bun add @financial-times/o3-tooltip`

## README

# o3 个工具提示[![MIT licensed](https://img.shields.io/badge/license-MIT-blue.svg)](https://npmcn.com/package/%40financial-times/o3-tooltip/#readme-licence)

o3-tooltip是两个组件的主机: `o3-tooltip-onboarding` 财务报告和审定财务报表 `o3-tooltip-toggle`。登入工具提示有助于更平滑地介绍新功能或功能。 切换提示是紧凑的信息,旨在在需要时提供更多的见解。 看我们的 [使用信息和品牌支持设计准则](https://origami-for-everyone.ft.com/)。 。 。 .

-   [o3 个工具提示](https://npmcn.com/package/%40financial-times/o3-tooltip/#readme-o3-tooltip)
-   [标记](https://npmcn.com/package/%40financial-times/o3-tooltip/#readme-markup)
-   [Java 脚本](https://npmcn.com/package/%40financial-times/o3-tooltip/#readme-javascript)
-   [密码](https://npmcn.com/package/%40financial-times/o3-tooltip/#readme-css)
-   [联合来文十](https://npmcn.com/package/%40financial-times/o3-tooltip/#readme-jsx)
    -   [登入工具提示](https://npmcn.com/package/%40financial-times/o3-tooltip/#readme-tooltiponboarding)
    -   [工具提示切换](https://npmcn.com/package/%40financial-times/o3-tooltip/#readme-tooltiptoggle)
-   [钩子](https://npmcn.com/package/%40financial-times/o3-tooltip/#readme-hooks)
-   [移徙指南](https://npmcn.com/package/%40financial-times/o3-tooltip/#readme-migration-guide)
-   [联系人](https://npmcn.com/package/%40financial-times/o3-tooltip/#readme-contact)
-   [许可证](https://npmcn.com/package/%40financial-times/o3-tooltip/#readme-licence)

## 标记

我们提供定制元素 `<o3-tooltip-onboarding>` 财务报告和审定财务报表 `<o3-tooltip-toggle>`。反应用户可能包括使用 [JSX 模板](https://npmcn.com/package/%40financial-times/o3-tooltip/#readme-jsx)。 。 。 .

`<o3-tooltip-onboarding>` 用于在 HTML 目标元素上显示工具提示 `aria-describedby` 属性。 它用于提供有关目标元素的额外信息,并在页面被加载后立即显示. 它只能通过点击关闭按钮来关闭.

`<o3-tooltip-toggle>` 没有关闭按钮,而是使用信息图标。 它可以通过点击信息图标来触发,如果用户在工具提示外点击,按下ESC,或再次点击信息图标,则会从DOM中删除.

以下是如何使用的实例 `<o3-tooltip-onboarding>` 财务报告和审定财务报表 `<o3-tooltip-toggle>` 自定义元素 :

```html
<!-- <o3-tooltip-onboarding> -->
<div data-o3-brand="[your brand]">
    <button
        id="demo-o3-tooltip-id"
        class="o3-button o3-button--secondary o3-button--big demo-tooltip-target"
        aria-describedby="demo-o3-tooltip-content"
    >
        Share
    </button>
    <o3-tooltip-onboarding
        role="tooltip"
        placement="top"
        target-id="demo-o3-tooltip-id"
        class="o3-tooltip"
        content="Tool tip content that is quite long, Tool tip content that is quite long, Tool tip content that is quite long"
        title="Title"
        content-id="demo-o3-tooltip-content"
    >
    </o3-tooltip-onboarding>
</div>
```

`content-id` 用于将工具提示与目标元素链接。 它被用来提供关于目标要素的补充资料.

```html
<!-- <o3-tooltip-toggle> -->
<div data-o3-brand="[your brand]">
    <o3-tooltip-toggle
        placement="bottom"
        class="o3-tooltip"
        content="click the button to see the tooltip"
        title="Title"
        info-label="more information"
    >
    </o3-tooltip-toggle>
</div>
```

`info-label` 属性用于为信息图标提供标签,以获得更好的屏幕阅读器体验. 默认情况下,它被设定为"更多信息".

## Java 脚本

除非您导入客户端JavaScript, 否则不会自动运行代码 。 要导入 JavaScript, 您可以使用以下代码 :

```javascript
import '@financial-times/o3-tooltip';
```

## 密码

到样式 `o3-tooltip` 导入特定品牌 cs,这取决于您的项目。 例如:

```scss
@import '@financial-times/o3-tooltip/css/[your brand].css';
```

## 联合来文十

`o3-tooltip` 出口两个JSX模板, `TooltipOnboarding` 财务报告和审定财务报表 `TooltipToggle` 每个工具提示组件。 JSX 模板导出为 `cjs` (共同联合来文)和 `esm` (ECMAScript)模块,因此取决于您的系统配置,您可能需要导入正确的模块类型. TSX模板可以帮助避免复制复制html. 例如:

```jsx
import {
    TooltipOnboarding,
    TooltipToggle,
} from '@financial-times/o3-tooltip/cjs';

import '@financial-times/o3-tooltip'; // import the JavaScript needed for custom elements on client side

import '@financial-times/o3-tooltip/css/[your brand].css'; // tooltip styling

<div className="o3-brand-[your brand]">
    <button id="target" aria-describedby="contentId">
        Target element
    </button>
    <TooltipOnboarding {...props} />;
    <TooltipToggle {...props} />
</div>;
```

### 登入工具提示

这个 `TooltipOnboarding` JSX要素接受以下内容: `props`数字 :

```ts
type Placement =
    | 'top'
    | 'bottom'
    | 'left'
    | 'right'
    | 'top-start'
    | 'top-end'
    | 'bottom-start'
    | 'bottom-end'
    | 'left-start'
    | 'left-end'
    | 'right-start'
    | 'right-end';
```

| Prop | 类型 | 所需经费 | 默认 | 说明 |
| :-: | :-: | :-: | :-: | :-: |
| 目标编号 | 字符串 | 真实 | \- 说吧 | 附加工具提示的目标元素 |
| 内容 | 字符串 | 真实 | \- 说吧 | 工具提示的内容 |
| 标题 | 字符串 | 虚假 | \- 说吧 | 工具提示的标题 |
| 内容编号 | 字符串 | 真实 | \- 说吧 | 编号为 `aria-describedby` 元素 |
| 安置情况 | `Placement` | 虚假 | "顶" | 工具提示的位置 |

### 工具提示切换

这个 `ToggleTooltip` JSX要素接受以下内容: `props`数字 :

```ts
type Placement = 'top' | 'bottom' | 'left' | 'right';
```

| Prop | 类型 | 所需经费 | 默认 | 说明 |
| :-: | :-: | :-: | :-: | :-: |
| 内容 | 字符串 | 真实 | \- 说吧 | 工具提示的内容 |
| 标题 | 字符串 | 虚假 | \- 说吧 | 工具提示的标题 |
| 安置情况 | `Placement` | 虚假 | "顶" | 工具提示的位置 |
| 信息标签 | 字符串 | 虚假 | 更多信息 | 屏幕阅读器标签 |

## 钩子

`o3-tooltip` 提供 `onClose` 钩子允许您在工具提示关闭前执行动作 .

**图十**

```tsx
import {TooltipOnboarding} from "@financial-times/o3-tooltip";

<TooltipOnboarding id='my-tooltip' onClose={() => {/* behaviour to execute when onClose is called */}} />
```

**联合来文**

请使用 HTML 工具提示 [我们的榜样](https://npmcn.com/package/%40financial-times/o3-tooltip/#readme-markup)。 。 。 .

```js
const tooltip = document.querySelector('#my-tooltip');

tooltip.onClose = () => {/* custom onClose code goes here */}
```

## 移徙指南

| 状态 | 主要版本 | 最后一个小版本 | 移徙指南 |
| :-: | :-: | :-: | :-: |
| 活动 | 3个 | 不详 | [迁移到 v3](https://npmcn.com/package/%40financial-times/o3-tooltip/MIGRATION.md#migrating-from-v2-to-v3) |
| 已贬值 | 2个 | 第2.3条 | \- 说吧 |
| 已贬值 | 1个 | \- 说吧 | 不详 |

## 联系人

如果您对本部分有任何问题或评论,或需要帮助使用本部分,请 [提出问题](https://github.com/Financial-Times/o3-tooltip/issues)访问 [#origami - 支持](https://financialtimes.slack.com/messages/origami-support/) 或电子邮件 [折纸支持](mailto:origami-support@ft.com)。 。 。 .

* * *

## 许可证

本软件由金融时报根据以下规定出版: [麻省理工学院许可证](http://opensource.org/licenses/MIT)。 。 。 .

## 常见问题

### @financial-times/o3-tooltip 是什么？

提供视图感知工具提示,用于注释或突出产品UI的其他方面

### 如何安装 @financial-times/o3-tooltip？

在项目目录运行 npm install @financial-times/o3-tooltip，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@financial-times/o3-foundation（^3\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @financial-times/o3-tooltip 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @financial-times/o3-tooltip 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @financial-times/o3-tooltip 可以商用吗？

@financial-times/o3-tooltip 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @financial-times/o3-tooltip 的下载量有多少？

根据 npm 官方下载统计，@financial-times/o3-tooltip 在 2026/10/15 – 2026/11/13 这 30 天内被下载 2,573 次，日均约 86 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @financial-times/o3-tooltip 还在维护吗？

最新版本 3\.2\.2 发布于 2026/03/04（8 个月前）；至今共发布 23 个版本，其中过去 12 个月发布了 3 个；首次发布于 2024/03/07。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。