可点击的angular工具提示弹出窗口

可点击的angular工具提示弹出窗口
插件名称 ng-tooltip
发布时间 2020年6月1日

基于click / tap事件的基本Angular工具提示组件。

安装:

# Yarn
$ yarn add @independer/ng-tooltip

# NPM
$ npm install @independer/ng-tooltip --save

使用:

添加TooltipModule到您的主app.module.ts

// app.module.ts
​
import { TooltipModule } from '@independer/ng-tooltip';
  
@NgModule({
  imports: [
    TooltipModule.forRoot() // This .forRoot() is necessary
  ]
})
export class AppModule { }

默认工具提示

默认情况下,工具提示触发器将是一个问号图标,如下所示:这些图标有3种不同尺寸,分别是sm,md,lg

带有图标lg的工具提示 <ind-tooltip content="这是一个使用content属性的简单工具提示" size="lg"></ind-tooltip>
带有图标md的工具提示 <ind-tooltip content="这是一个使用content属性的简单工具提示" size="md"></ind-tooltip>
带有图标sm的工具提示 (default) <ind-tooltip content="这是一个使用content属性的简单工具提示" size="sm"></ind-tooltip>

自定义工具提示触发器

您可以使用自己的图标或自定义HTML元素替换工具提示触发器(问号图标)。

<ind-tooltip content="没有问号的工具提示">
  <a>单击此链接!</a> 
</ind-tooltip>

标题和内容的工具提示

在工具提示中,您可以选择分别编写标题和内容。

<ind-tooltip header="这是工具提示标题" content="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum."></ind-tooltip>

带有HTML内容的工具提示

通过在<ng-template #tooltipContentTemplate></ng-template>inside中声明,还可以在工具提示中包含自定义HTML内容<ind-tooltip></ind-tooltip>。哈希tooltipContentTemplate会将其标记为工具提示中的HTML内容,因此必须完全相同地编写。

<ind-tooltip header="这是一个包含HTML元素的工具提示"> 
  <ng-template #tooltipContentTemplate> 
    Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum. 
    <h4>和一个按钮</h4> 
    <button>一个按钮</button>
  </ng-template>
</ind-tooltip>