# @financial-times/o-tooltip 中文文档 规范地址：https://npmcn.com/package/%40financial-times/o-tooltip/ 版本：6\.0\.1 npm 元数据更新时间：2026-10-06T13:39:55.815Z 中文译文更新时间：2026-11-14T18:50:31.455Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40financial-times/o-tooltip 原文对照：https://npmcn.com/package/%40financial-times/o-tooltip/?lang=original 项目主页：https://registry.origami.ft.com/components/o-tooltip ## 关键信息（来自 npm 元数据） - 包体积（解压后）：67.9 kB，30 个文件 - 模块格式：ES Module - TypeScript 类型：未声明 - 运行依赖：1 个 - peer 依赖：@financial-times/o-brand ^4\.2\.1，@financial-times/o-overlay ^5\.0\.0，@financial-times/o-viewport ^5\.1\.2，@financial-times/o-private-foundation ^1\.0\.0 - 首次发布：2019-02-12T21:23:12.845Z - 最新版本发布：2025-04-16T16:55:05.569Z - 近 30 天下载量：3958（2026-10-15 至 2026-11-13，npm 官方下载统计） - 已发布版本数：39（近 12 个月 0 个） ## 中文简介 提供视图感知工具提示,用于注释或突出产品UI的其他方面 ## 安装 ```sh npm install @financial-times/o-tooltip ``` 也可以使用：`pnpm add @financial-times/o-tooltip`、`yarn add @financial-times/o-tooltip`、`bun add @financial-times/o-tooltip` ## README # o-工具点 [![MIT licensed](https://img.shields.io/badge/license-MIT-blue.svg)](https://npmcn.com/package/%40financial-times/o-tooltip/#readme-licence) o-tooltip是一个通常用于注释或突出用户界面比特的组件. - [使用量](https://npmcn.com/package/%40financial-times/o-tooltip/#readme-usage) - [标记](https://npmcn.com/package/%40financial-times/o-tooltip/#readme-markup) - [Java 脚本](https://npmcn.com/package/%40financial-times/o-tooltip/#readme-javascript) - [萨斯](https://npmcn.com/package/%40financial-times/o-tooltip/#readme-sass) - [自定义](https://npmcn.com/package/%40financial-times/o-tooltip/#readme-customisation) - [移徙指南](https://npmcn.com/package/%40financial-times/o-tooltip/#readme-migration-guide) - [联系人](https://npmcn.com/package/%40financial-times/o-tooltip/#readme-contact) - [许可证](https://npmcn.com/package/%40financial-times/o-tooltip/#readme-licence) ## 使用量 检查出来 [如何将 Origami 组件纳入您的项目](https://origami.ft.com/documentation/components/#including-origami-components-in-your-project) 开始 `o-tracking`。 。 。 . ### 标记 此 HTML 演示了即时化 o-tooltip 的宣告方式 。 如果你正在使用建设服务 或发射自己的 `o.DOMContentLoaded` 事件,这就是创建工具提示所需的全部. ```html
A bit of UI to annotate
Some text to go in the tooltip
``` 此 HTML 是强制选项的示例 : ```html
``` 属性可以声明设置,也可以在一个选项对象的即时化上传递. 完整的数据属性列表 : - `data-o-tooltip-target`: 必需。 工具提示目标(指向的东西)的ID选择器 - `data-o-tooltip-position`: 可选。 工具提示相对于目标的优先位置 。 可以成为其中之一 `above`, (中文(简体) ), `below`, (中文(简体) ), `left`, (中文(简体) ), `right`。如果没有空间使通过选项时的工具提示变为工具提示,则该值被翻转(以上变为下方,左变为右). 默认为下. 也可以指定每个视图宽度("默认","S","M","L","XL")等数据-o-tooltip-post-s="左"的不同位置. 该位置会回落到数据-o-tooltip-位置的默认位置上,否则"从下". - `data-o-tooltip-show-on-construction`: 可选。 布尔值 。 如果您想要工具提示在构建后立即被渲染, 请设定为真实 。 默认为假. - `data-o-tooltip-show-on-hover`: 可选。 布尔值 。 如果您想要根据目标鼠标覆盖和鼠标退出事件( 分别) 显示和隐藏工具提示, 请设定为真实 。 默认为假. - `data-o-tooltip-show-on-focus`: 可选。 布尔值 。 设定为真实, 如果您想要显示和隐藏基于目标焦点和焦点事件( 分别) 的工具提示 。 默认为假. - `data-o-tooltip-show-on-click`: 可选。 布尔值 。 如果您想要在单击目标元素时显示工具提示, 请设定为真实 。 默认为假. - `data-o-tooltip-toggle-on-click`: 可选。 布尔值 。 如果您想要通过点击目标来显示和隐藏工具提示, 请设定为真 . - `data-o-tooltip-show-after`: 可选。 整数值. 指定显示工具提示前的等待秒数。 仅适用于下列情况: `data-o-tooltip-show-on-construction` 设置为 `false` - `data-o-tooltip-close-after`: 可选。 整数值. 指定关闭工具提示前的等待秒数。 仅适用于下列情况: `data-o-tooltip-show-on-construction` 设置为 `true` - `data-o-tooltip-z-index`: 可选。 工具提示的 Z 索引 . - `data-o-tooltip-animation-distance`: 可选。 与字符串 `px` 后缀。 远离目标开始和结束动画. 默认为"10px" . - `data-o-tooltip-append-to-body`: 可选。 将工具提示添加到 `body` 元素的定位和大小要根据身体而不是母元素。 默认情况下,该工具提示作为工具提示目标的兄弟姐妹被附加. 默认为 `false`。 。 。 . - `data-o-tooltip-theme`: 可选。 用于在创建工具提示时强制应用主题,否则如果复制工具提示标记会使用下面描述的主题类. 默认为 `undefined`。 。 。 . #### 主题 要公开应用一个主题,请添加类 `o-tooltip o-tooltip--[theme name]` 敬你的标记。 例如,为专业主题输出一个工具提示: ```html
A bit of UI to annotate
Some text to go in the tooltip
``` 您也可以使用 JavaScript API 设置主题 . ### Java 脚本 没有代码会自动运行, 除非你正在使用构建服务 . 您必须构建一个 `o-tooltip` 物体或起火 `o.DOMContentLoaded` 事件, oTooltip 正在听 . #### 构造 O- 工具提示 如果您已声明设置了工具提示,则适用以下规定: ```js import Tooltip from '@financial-times/o-tooltip'; const tooltipEl = Document.getElementById('my-tooltip-element'); const tooltip = new Tooltip(tooltipEl); ``` 或者,如果您想刻意构建一个工具提示,您可以通过在您的目标元素和一个选项对象中传递来即时切换o-tool提示. ```js import Tooltip from '@financial-times/o-tooltip'; const tooltipEl = document.querySelector('.imperative-tooltip-element'); const opts = { target: 'tooltip-target-imperative', content: 'Click to save to somewhere', showOnConstruction: true, position: 'right', }; const tooltip = new Tooltip(tooltipEl, opts); ``` 由于这从零开始创建了工具提示,除以下内容外,在选项对象中包括任何声明属性(如上所列举)也很重要: - `content`: 必需。 弦乐 这是将在工具提示中显示的内容 . #### 在正文中直接创建工具提示 存在无法在元素旁边显示工具提示的情况( 即元素的母体有) `overlow: hidden`) (中文(简体) ). 对于这类情况,工具提示可以使用 `appendToBody` 配置属性, 这将迫使工具提示元素就在前面创建 `body` 标记关闭. ```js import Tooltip from '@financial-times/o-tooltip'; const tooltipEl = document.querySelector('.imperative-tooltip-element'); const opts = { target: 'tooltip-target-imperative', content: 'Click to save to somewhere', showOnConstruction: true, position: 'above', appendToBody: true, }; const tooltip = new Tooltip(tooltipEl, opts); ``` _记着! 此属性只能在解析工具提示时使用_ #### 发射 ODOM 失败事件 ```js document.addEventListener('DOMContentLoaded', function () { document.dispatchEvent(new CustomEvent('o.DOMContentLoaded')); }); ``` ### 萨斯 这个 `oTooltip` 混音用于输出工具提示选择器和样式. 该产出包括所有 `.o-tooltip` 类 : ```scss @include oTooltip(); ``` ```css .o-tooltip { /* styles */ } .o-tooltip-content { /* styles */ } /* etc. */ ``` 您也可以选择只为特定主题输出工具提示 : ```scss @include oTooltip( $opts: ( 'professional', ) ); ``` 有一个 [origami 登记处提供的全部Sass文件](https://registry.origami.ft.com/components/o-tooltip/sassdoc)。 。 。 . ## 自定义主题 包含 `oTooltipAddTheme` 混合输出自定义工具提示主题。 混音接受您主题的名称和选项地图: - `name`: 您的主题名称 。 用于修改类输出 `o-tooltip--[name]`。 。 。 . - `opts`: 您主题选项地图. - `background-color`: 工具提示的背景颜色. - `foreground-color`: 工具提示的前景/文本颜色. - `close-foreground-color` (可选) : 关闭按钮的颜色 。 如果没有设置 `foreground-color` 已使用. 以下的例子说明了如何添加一个名为"我的产品-修饰"的自定义主题,其背景为平板,前景为白色. 而不是"我的产品-修饰者"选择一个包含您项目名称的描述性名称,所以清晰地显示自定义主题的添加地点. ```scss // Outputs CSS class o-tooltip--my-product-modifier. // Uses an o-colors function to fetch Origami colour values. @include oTooltipAddTheme( 'my-product-modifier', ( 'background-color': oColorsByName('slate'), 'foreground-color': oColorsByName('white'), ) ); ``` 这将输出一个 CSS 类 `o-tooltip--[name]`。在工具提示中添加此类以查看自定义主题. ## 移徙指南 | 状态 | 主要版本 | 最后一个小版本 | 移徙指南 | | :-: | :-: | :-: | :-: | | 维护 | 6个 | 不详 | [迁移到 v6](https://npmcn.com/package/%40financial-times/o-tooltip/MIGRATION.md#migrating-from-v5-to-v6) | | 已贬值 | 页:1 | 5.4 (中文(简体) ) | [迁移到 v5](https://npmcn.com/package/%40financial-times/o-tooltip/MIGRATION.md#migrating-from-v4-to-v5) | | 已贬值 | 页:1 | 4.1 国家 | [迁移到 v4](https://npmcn.com/package/%40financial-times/o-tooltip/MIGRATION.md#migrating-from-v3-to-v4) | | 已贬值 | 3个 | 3.5 (中文(简体) ) | [迁移到 v3](https://npmcn.com/package/%40financial-times/o-tooltip/MIGRATION.md#migrating-from-v2-to-v3) | | 已贬值 | 2个 | 2.3.7 国家 | [迁移到 v2](https://npmcn.com/package/%40financial-times/o-tooltip/MIGRATION.md#migrating-from-v1-to-v2) | | 已贬值 | 1个 | 1.1.1 (中文(简体) ) | 不详 | ## 联系人 如果您对本部分有任何问题或评论,或需要帮助使用本部分,请 [提出问题](https://github.com/Financial-Times/o-tooltip/issues)访问 [#origami - 支持](https://financialtimes.slack.com/messages/origami-support/) 或电子邮件 [折纸支持](mailto:origami-support@ft.com)。 。 。 . * * * ## 许可证 本软件由金融时报根据以下规定出版: [麻省理工学院许可证](http://opensource.org/licenses/MIT)。 。 。 . ## 常见问题 ### @financial-times/o-tooltip 是什么？ 提供视图感知工具提示,用于注释或突出产品UI的其他方面 ### 如何安装 @financial-times/o-tooltip？ 在项目目录运行 npm install @financial-times/o-tooltip，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@financial-times/o-brand（^4\.2\.1）、@financial-times/o-overlay（^5\.0\.0）、@financial-times/o-viewport（^5\.1\.2）、@financial-times/o-private-foundation（^1\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @financial-times/o-tooltip 支持 TypeScript 吗？ 该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/financial-times\_\_o-tooltip 是否存在。 ### @financial-times/o-tooltip 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @financial-times/o-tooltip 可以商用吗？ @financial-times/o-tooltip 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @financial-times/o-tooltip 的下载量有多少？ 根据 npm 官方下载统计，@financial-times/o-tooltip 在 2026/10/15 – 2026/11/13 这 30 天内被下载 3,958 次，日均约 132 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @financial-times/o-tooltip 还在维护吗？ 最新版本 6\.0\.1 发布于 2025/04/17（1\.6 年前）；至今共发布 39 个版本，其中过去 12 个月发布了 0 个；首次发布于 2019/02/13。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。