# @amin-karimi/ng2-tooltip-directive 中文文档

规范地址：https://npmcn.com/package/%40amin-karimi/ng2-tooltip-directive/

版本：19\.0\.0
npm 元数据更新时间：2025-01-07T07:21:10.654Z
中文译文更新时间：2026-11-08T07:49:53.427Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40amin-karimi/ng2-tooltip-directive
原文对照：https://npmcn.com/package/%40amin-karimi/ng2-tooltip-directive/?lang=original
项目主页：https://github.com/Amin-Karimi/ng2-tooltip-directive#readme
源码仓库：https://github.com/Amin-Karimi/ng2-tooltip-directive

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

- 包体积（解压后）：101 kB，12 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：@angular/common ^19\.0\.5，@angular/core ^19\.0\.5
- 首次发布：2022-12-13T06:30:37.277Z
- 最新版本发布：2025-01-07T07:21:10.468Z
- 近 30 天下载量：1860（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：15（近 12 个月 0 个）

## 中文简介

角化工具提示

## 安装

```sh
npm install @amin-karimi/ng2-tooltip-directive
```

也可以使用：`pnpm add @amin-karimi/ng2-tooltip-directive`、`yarn add @amin-karimi/ng2-tooltip-directive`、`bun add @amin-karimi/ng2-tooltip-directive`

## README

# 角化工具提示

[第18.1.0节](https://www.npmjs.com/package/@amin-karimi/ng2-tooltip-directive/v/18.1.0) 角18.0.1号

[维 4.0.2](https://www.npmjs.com/package/@amin-karimi/ng2-tooltip-directive/v/4.0.2) 角值 17.3.7

[V4.0.1 导弹](https://www.npmjs.com/package/@amin-karimi/ng2-tooltip-directive/v/4.0.1) 角质 17.0.9

[维基百科中的相关条目:](https://www.npmjs.com/package/@amin-karimi/ng2-tooltip-directive/v/3.0.2) 角值 16.0.5

[第V2.0.1号决议](https://www.npmjs.com/package/@amin-karimi/ng2-tooltip-directive/v/2.0.1) 角数 15.0.4

[第V1.0.3号决定](https://www.npmjs.com/package/@amin-karimi/ng2-tooltip-directive/v/1.0.3) 角数 14.2

[![Build Status](https://travis-ci.org/drozhzhin-n-e/ng2-tooltip-directive.svg?branch=master)](https://travis-ci.org/drozhzhin-n-e/ng2-tooltip-directive) ![](https://badgen.net/bundlephobia/min/ng2-tooltip-directive)

工具提示是一个弹出提示,当您在某个项目上徘徊或点击时会出现.

帮助让工具提示变得更好 [回答几个问题](https://docs.google.com/forms/d/e/1FAIpQLSfuDYQLyGWLApEtnQH5wD2_HNjEM7lV_XJAhrQZEPm14mBZ-A/viewform)。 。 。 .

## 演示

[http://ivylab.space/tooltip (英语)](http://ivylab.space/tooltip)

## 安装

安装 npm 软件包 .

// npm i ng2-tooltip- 定向

```
  npm i @amin-karimi/ng2-tooltip-directive
```

导入 `standalone`数字 :

```ts

import { TooltipDirective } from '@amin-karimi/ng2-tooltip-directive';
 
@Component({
    imports: [ TooltipDirective ]
}) 
```

导入 `Ng2Module`数字 :

```ts

import { TooltipModule } from '@amin-karimi/ng2-tooltip-directive';
 
@NgModule({
    imports: [ TooltipModule ]
}) 
```

## 使用量

选项可以在指令标记中设置,因此它们具有最高的优先级.

```html
<span tooltip="Tooltip" placement="top" showDelay="500">Tooltip on top</span>
```

你可以通过为对象:

```html
<span tooltip="Tooltip" [options]="myOptions">Tooltip on left</span>
```

```ts
myOptions = {
    'placement': 'left',
    'showDelay': 500
}
```

您可以通过 HTML 作为内容 :

```html
<span tooltip="<p>Hello i'm a <strong>bold</strong> text!</p>">
  Tooltip with HTML content
</span>
```

```html
<ng-template #HtmlContent>
  <p>Hello i'm a <strong>bold</strong> text!</p>
</ng-template>

<span [tooltip]="HtmlContent" contentType="template">
  Tooltip with template content
</span>
```

## 设定默认值

以您的设置创建文件, 例如 :

```ts
import { TooltipOptions } from 'ng2-tooltip-directive';

export const MyDefaultTooltipOptions: TooltipOptions = {
  'show-delay': 500
}
```

导入模块时传递参数 :

```ts
//import { TooltipModule, TooltipOptions } from 'ng2-tooltip-directive';
import { TooltipModule, TooltipOptions } from '@amin-karimi/ng2-tooltip-directive';
import { MyDefaultTooltipOptions } from './my-default-options';
 
@NgModule({
    imports: [ 
      TooltipModule.forRoot(MyDefaultTooltipOptions as TooltipOptions)
    ]
})
```

## 属性

| 名称 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| 安置情况 | "上" "下" "左" "右" | "顶" | 工具提示的位置 . |
| 自动安放 | 布尔 | 真实 | 放置工具提示,使其不超出浏览器窗口的边界. |
| 显示延迟 | 编号 | 0 个 | 在显示工具提示前的 ms 延迟 . |
| 隐藏延迟 | 编号 | 三百块 | 删除工具提示前的 ms 延迟 . |
| 隐藏Delay 触摸屏 | 编号 | 0 个 | 在隐藏工具提示(用于移动设备)前以毫秒延迟 . |
| 显示 | 布尔 | 真实 | 显示工具提示可用性 . |
| 显示触摸屏 | 布尔 | 真实 | 在移动设备上显示工具提示 . |
| zindex 数据 | 编号 | 0 个 | 工具提示的Z指数. |
| 触发 | "hover","点击" | "过" | 指定工具提示的触发方式。 用"隐藏延迟"控制关闭时间. |
| 工具提示分类 | 字符串 |  | 要传递到工具提示的类 . |
| 动画期限 | 编号 | 三百块 | 持续时间控制了动画从开始到完成需要多长时间. |
| 主题 | "黑暗","光" | "黑暗"(暗语) | 工具提示的背景和文本主题 . |
| 阴影 | 布尔 | 真实 | 工具提示的阴影. |
| 页:1 | 编号 | 第8条 | 将工具提示相对于项目. |
| 宽度 | 编号 | 未定义 | 工具提示的宽度 . |
| 最大宽度 | 编号 | 200个 | 工具提示的最大宽度 . |
| 内容类型 | "弦","html","腾讯" | "弦"(弦声) | 内容类型传递到工具提示 . |
| 隐藏延迟后点击 | 编号 | 联合国 | 工具提示隐藏“ 点击” 触发延迟 . |
| 指针事件 | "自动","无" | 没有 | 定义元素是否对指针事件作出反应. |
| 职位 | {上:号码,左:号码} | 未定义 | 工具提示与浏览器窗口相对坐标. |

## 活动

当您调用事件时,会考虑指令中选项中指定的延迟. 工具提示隐藏前的默认延迟为 300 毫秒 .

| 活动 | 说明 |
| --- | --- |
| {类型:"显示",位置:DOMRect} | 此事件在工具提示出现前被调用 . |
| {类型:"shown",位置: DOMRect} | 该事件取名于工具提示外观的动画后. |
| {类型:"隐藏",位置:DOMRect} | 该事件在工具提示被隐藏之前叫作. |
| {类型:"隐藏",位置:DOMRect} | 该事件在工具提示的动画被隐藏后被称作. |

## 方法

如果您指定了指令选项,在调用方法时将考虑这些选项。 包括工具提示出现和隐藏前的延迟.

| 方法 | 说明 |
| --- | --- |
| 显示 () | 显示工具提示 |
| 隐藏( c) | 隐藏工具提示 |

## 作者服务

你对这个图书馆感兴趣但缺乏特色吗? [写信给作者](https://github.com/drozhzhin-n-e), ([https://github.com/阿明-卡里米(英语:Amin-Karimi)](https://github.com/Amin-Karimi)他可以帮你.

## 发起人

我们使用浏览器进行交叉浏览测试.

[![Browserstack](http://ivylab.space/assets/img/browserstack-logo.png)](http://browserstack.com/)

## 常见问题

### @amin-karimi/ng2-tooltip-directive 是什么？

角化工具提示

### 如何安装 @amin-karimi/ng2-tooltip-directive？

在项目目录运行 npm install @amin-karimi/ng2-tooltip-directive，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@angular/common（^19\.0\.5）、@angular/core（^19\.0\.5）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @amin-karimi/ng2-tooltip-directive 支持 TypeScript 吗？

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

### @amin-karimi/ng2-tooltip-directive 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @amin-karimi/ng2-tooltip-directive 可以商用吗？

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

### @amin-karimi/ng2-tooltip-directive 的下载量有多少？

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

### @amin-karimi/ng2-tooltip-directive 还在维护吗？

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