角化工具提示

第18.1.0节 角18.0.1号

维 4.0.2 角值 17.3.7

V4.0.1 导弹 角质 17.0.9

维基百科中的相关条目: 角值 16.0.5

第V2.0.1号决议 角数 15.0.4

第V1.0.3号决定 角数 14.2

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

帮助让工具提示变得更好 回答几个问题。 。 。 .

演示

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

安装

安装 npm 软件包 .

// npm i ng2-tooltip- 定向

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

导入 standalone数字 :

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

导入 Ng2Module数字 :

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

使用量

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

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

你可以通过为对象:

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

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

您可以通过 HTML 作为内容 :

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

<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>

设定默认值

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

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

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

导入模块时传递参数 :

//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)
    ]
})

属性

活动

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

方法

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

作者服务

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

发起人

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