Angular 2+ 的工具提示指令 - ng2-tooltip-directive

Angular 2+ 的工具提示指令 - ng2-tooltip-directive
插件名称 ng2-tooltip-directive
发布时间 2020年7月18日
插件作者 drozhzhin-n-e

为Angular 2+应用程序创建的一个非常简单而漂亮的工具提示指令。

如何使用它:

使用NPM安装软件包:

# NPM
$ npm install ng2-tooltip-directive --save

将其导入ngModule。

import { TooltipDirective } from 'ng2-tooltip-directive/components';
 
@NgModule({
    declarations: [ TooltipDirective ]
})

用法。

<button tooltip="Tooltip" placement="top" style="margin: 10px 10px 10px 0;">工具提示在上面</button>
<button tooltip="爱是一种享受,他的言语是一种享受。" placement="bottom" style="margin: 10px 10px 10px 0;">工具提示在底部</button>
<button tooltip="Tooltip" placement="left" style="margin: 10px 10px 10px 0;">工具提示左</button>
<button tooltip="爱是一种享受,他的言语是一种享受。" placement="right" delay="500" style="margin: 10px 10px 10px 0;">工具提示在右边,延迟500ms</button>

Props 。

  • placement : “top”, “bottom”, “left”, “right” 。默认值:“ top”
  • show-delay:显示工具提示之前的延迟(以毫秒为单位)。默认值:0
  • hide-delay:删除工具提示之前的延迟(以毫秒为单位)。默认值:300。
  • z-index:工具提示的Z-index。默认值:false。