npm 包 nemex-angular2-tooltip 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在 Angular2 中实现 tooltip 功能需要写很多代码，为了简化这个过程，开发者们写了很多 npm 包来解决这个问题。其中，nemex-angular2-tooltip 是一款非常优秀的 tooltip npm 包，可以帮助我们快速实现 tooltip 功能。

1. 安装和基本用法

要使用这个 npm 包，我们首先需要在我们的项目中安装它。在项目根目录下，运行以下命令：

npm install nemex-angular2-tooltip --save

安装成功之后，在我们的组件中就可以使用这个 npm 包了。在要显示 tooltip 的元素上，添加一个标记即可。例如：

<span tooltip="The Hover Message">Hover over me</span>

这里的 tooltip 属性就是指定 tooltip 中要显示的文字。

2. 高级用法

nemex-angular2-tooltip 还提供了更多高级用法，包括设置 tooltip 的位置、样式、内容等。下面将详细介绍这些用法。

2.1 设置 tooltip 的位置

默认情况下，tooltip 会在元素的上方显示。如果我们想要改变 tooltip 的位置，可以使用下面的属性：

<div tooltip="I am to the right" position="right">Hover over me</div>
<div tooltip="I am to the left" position="left">Hover over me</div>
<div tooltip="I am on top" position="top">Hover over me</div>
<div tooltip="I am beneath" position="bottom">Hover over me</div>

2.2 设置 tooltip 的样式

我们可以通过 CSS 来改变 tooltip 的样式。如果我们想要改变 tooltip 的字体颜色和背景颜色，可以在 app.component.css 文件中添加以下 CSS 代码：

.tooltip {
    color: red;
    background-color: yellow;
}

2.3 设置 tooltip 的内容

我们还可以使用 ng-template 来定制 tooltip 的内容。例如：

<span tooltip="I am not showing what I'll tooltip on hover">
    <ng-template #customTooltipContent>
        This is a custom message
    </ng-template>
</span>

当我们 hover 在原元素上时，customTooltipContent 中的内容就会显示在 tooltip 中。

2.4 指定 tooltip 的延迟时间

当我们 hover 在原元素上时，tooltip 不会立即显示，而是有一个默认的延迟时间。我们可以使用 delay 属性来指定这个延迟时间（单位为毫秒，默认为 500 毫秒）：

<span tooltip="Delay is 1000ms" delay="1000">Hover over me</span>

3. 示例代码

3.1 基本示例

下面是一个简单的示例，其中我们使用 nemex-angular2-tooltip 来为一个 div 元素添加 tooltip：

app.component.html

<div tooltip="这是一个 tooltip">悬停在我上面</div>

app.module.ts

import { TooltipModule } from 'nemex-angular2-tooltip';
@NgModule({
    imports: [
       TooltipModule,
    ]
})
export class AppModule { }

3.2 设置 tooltip 位置

下面的示例中，我们设置 tooltip 在原元素的右边显示：

<div tooltip="这是一个 tooltip，位置在右边" position="right">悬停在我上面</div>

3.3 自定义 tooltip 内容

下面的示例中，我们使用 ng-template 来定义一个自定义的 tooltip 内容：

<span tooltip="这是一个 tooltip，内容为自定义">悬停在我上面
    <ng-template #customTooltipContent>
        这是一个自定义的 tooltip 内容
    </ng-template>
</span>

3.4 设置 tooltip 样式

下面的示例中，我们使用 CSS 来改变 tooltip 的字体颜色和背景颜色：

app.component.css

.tooltip {
    color: blue;
    background-color: yellow;
}