# @felte/reporter-tippy 中文文档

规范地址：https://npmcn.com/package/%40felte/reporter-tippy/

版本：1\.1\.10
npm 元数据更新时间：2024-10-29T22:05:16.762Z
中文译文更新时间：2026-11-14T14:09:21.981Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40felte/reporter-tippy
原文对照：https://npmcn.com/package/%40felte/reporter-tippy/?lang=original
项目主页：https://github.com/pablo-abc/felte/tree/main/packages/reporter-tippy
源码仓库：https://github.com/pablo-abc/felte

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

- 包体积（解压后）：239 kB，9 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：^12\.20\.0 \|\| ^14\.13\.1 \|\| \>=16\.0\.0
- 运行依赖：1 个
- peer 依赖：tippy\.js ^6\.0\.0
- 首次发布：2021-02-10T03:35:35.840Z
- 最新版本发布：2024-10-29T22:05:16.541Z
- 近 30 天下载量：2719（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：81（近 12 个月 0 个）

## 中文简介

\[破 使用 Tipy.js 的 Felte 错误报告器

## 安装

```sh
npm install @felte/reporter-tippy
```

也可以使用：`pnpm add @felte/reporter-tippy`、`yarn add @felte/reporter-tippy`、`bun add @felte/reporter-tippy`

## README

# @felte/reporter-tippy (英语)

[![Tests](https://github.com/pablo-abc/felte/workflows/Tests/badge.svg)](https://github.com/pablo-abc/felte/actions/workflows/test.yml) [![Bundle size](https://img.shields.io/bundlephobia/min/@felte/reporter-tippy)](https://bundlephobia.com/result?p=@felte/reporter-tippy) [![NPM Version](https://img.shields.io/npm/v/@felte/reporter-tippy)](https://www.npmjs.com/package/@felte/reporter-tippy) [![codecov](https://codecov.io/gh/pablo-abc/felte/branch/main/graph/badge.svg?token=T73OJZ50LC)](https://codecov.io/gh/pablo-abc/felte)

使用 Felte 的记者 [Tippy.js (英语)](https://atomiks.github.io/tippyjs/) 以显示错误消息.

> \[尖叫声\] Tipy.js在过去几年里没有被维持(而"浮井"似乎是它的取而代之) 因此,我不再建议使用这一一揽子办法,而应视为贬值.

## 安装

```sh
npm install --save @felte/reporter-tippy tippy.js

# Or, if you use yarn

yarn add @felte/reporter-tippy tippy.js
```

## 使用量

默认导出是返回报告者的函数 。 把它加进 `extend` 费尔特的财产 `createForm` 配置对象.

```javascript
import reporter from '@felte/reporter-tippy';

const { form } = createForm({
  // ...
  extend: reporter(),
  // ...
});
```

你也许也想把Tippy的风格加进你的回放

```javascript
import 'tippy.js/dist/tippy.css';
```

## 选项

您可以在给记者打电话时将选项传递给 Tipby :

```javascript
reporter({
  tippyProps: {
    /* tippy options */
  },
});
```

也可以通过一个 `setContent` 函数将接收当前验证消息和字段路径。 您可以在此修改您的验证信件, 如果您想在 Tipy 内显示 HTML 内容, 这些信息将会有用 。 这个 `messages` 参数或是一个字符串的数组(根据您的验证策略,它可能不止一个消息)或未定义。 这个 `path` 参数将是一个字符串,带有您字段的全部路径(例如. `email`, (中文(简体) ), `account.email`(见e/cn.4/sub.2/2002/l.48等).

```javascript
reporter({
  setContent: (messages, path) => {
    return messages?.map((message) => `<p>${message}</p>`);
  },
  tippyProps: {
    allowHTML: true,
  },
});
```

您也可以使用 `tippyPropsMap` 属性。 它期望一个与您数据形状相同的物体:

```javascript
reporter({
  tippyPropsMap: {
    account: {
      email: {
        allowHTML: true,
        /* other tippy props */
      },
    },
  },
});
```

## 警告

这个记者也可以显示您的警告信息 。 为了这样做,你需要通过财产 `level` 给您的记者的值为 `warning`。 。 。 .

```javascript
reporter({
  level: 'warning',
});
```

> 为了避免你的UI出错,建议使用Tippy报告错误 _或_ 警告,不是两者皆有.

## 选择退出

如果这个套件不能满足您对所有情况的需求, 请知道我们正在努力改进, 但是您最好选择不报告一个特定字段的错误, 添加 `data-felte-reporter-tippy-ignore` 作为您输入的属性.

```html
<input name="email" data-felte-reporter-tippy-ignore />
```

## 自定义控制

如果您使用非 Felte 管理的自定义控制, 您仍然可以使用 `@felte/reporter-tippy`。您可以为此使用两个数据属性:

-   `data-felte-reporter-tippy-for`: 告诉此包使用带有此属性的元素作为指定字段的控制.
-   `data-felte-reporter-tippy-trigger-for`: 告诉此包使用带有此属性的元素作为触发器,以显示指定字段的 Tippy .

自定义控件将永远成为tipy的触发器,第二个参数是有用的,如果你想用标签等其它元素来触发Tipy来模仿这个包的默认行为.

```html
<span id="email-label" data-felte-reporter-tippy-trigger-for="email"
  >Email:</span
>
<div
  contenteditable
  data-felte-reporter-tippy-for="email"
  aria-labelledby="email-label"
  tabindex="0"
/>
```

## 自定义定位

如果您需要显示您的Tippy的位置不同,您可以使用 `data-felte-reporter-tippy-position-for` 属性。 如果使用自定义控制,在幕后使用有效的 HTML 输入但隐藏它,这将是有益的:

```html
<!-- Tippy will be shown on top of this div -->
<div data-felte-reporter-tippy-position-for="email" />
<!-- Not on top of this input -->
<input name="email" type="email" />
```

## 常见问题

### @felte/reporter-tippy 是什么？

\[破 使用 Tipy\.js 的 Felte 错误报告器

### 如何安装 @felte/reporter-tippy？

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

### @felte/reporter-tippy 支持 TypeScript 吗？

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

### @felte/reporter-tippy 支持 ESM 还是 CommonJS？

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

### @felte/reporter-tippy 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js ^12\.20\.0 \|\| ^14\.13\.1 \|\| \>=16\.0\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @felte/reporter-tippy 可以商用吗？

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

### @felte/reporter-tippy 的下载量有多少？

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

### @felte/reporter-tippy 还在维护吗？

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