angular tooltips

其他类别 2025-08-17

angular tooltips

angular tooltips是AngularJS指令,可在您的元素上生成工具提示。

angular tooltips是由720KB开发的。

要求

Angularjs v1.3+

屏幕

浏览器支持

铬合金Firefox IE歌剧野生动物园
IE9 +

加载

要使用该指令,请在网页中包含angular tooltips JavaScript和CSS文件:

//..... ">
 >
< html >
< head >
  < link href =" dist/angular-tooltips.min.css " rel =" stylesheet " type =" text/css " />
 head >
< body ng-app =" app " >
  //.....
  < script src =" dist/angular-tooltips.min.js " >  script >
 body >
 html > 

安装

鲍尔

 $ bower install angular-tooltips --save

NPM

 $ npm install angular-tooltips --save

然后将JS文件加载到您的html中

添加模块依赖关系

添加720KB.tooltips模块依赖关系

 angular . module ( 'app' , [
  '720kb.tooltips'
 ] ) ;

在您想要的HTML页面中,请致电指令

Tooltip me ">
 < a href =" # " tooltips tooltip-template =" tooltip " > Tooltip me  a > 

Doc

选项类型默认描述
工具提示方=“” string(“左”,“右”,“顶”,“底部”,“左上”,“右上”,“左下”,“右下”) '顶部'将工具提示设置为显示在leftrighttopbottomtop lefttop rightbottom leftbottom right位置
tooltip-template =“”细绳() ''设置工具提示模板(HTML或仅文本)
要知道:不要将其与tooltip-template-url属性一起使用,只使用其中一个
tooltip-template-url =“”细绳() ''设置外部工具提示模板路径
要知道:不要将其与tooltip-template属性一起使用,只使用其中一个
tooltip-template-url-cache =“”字符串(布尔)错误的此属性存储并从缓存中检索模板
tooltip-controller =“”细绳() ''将控制器设置为外部工具提示模板
工具提示 - 玛丽特=“”字符串(布尔)错误的设置工具提示以自动搜索屏幕上的最佳位置
工具提示-Show-trigger =“”字符串('event1 event2') “鼠标”显示有关特定事件的工具提示
工具提示 - hide-trigger =“”字符串('event1 event2') 'Mouseleave'隐藏特定事件的工具提示
工具提示close-button =“”字符串(布尔)错误的启用工具提示关闭按钮
工具提示级=“”细绳() ''设置自定义工具提示CSS类/类
工具提示=“”字符串(“大”,“小”) '中等的'设置工具提示尺寸
工具提示速度=“”字符串('fast','slow','edimed') '中等的'设置工具提示显示和隐藏过渡速度
工具提示隐藏=“”字符串(布尔)错误的隐藏(完全)工具提示
tooltip-append to-body =“”字符串(布尔)错误的此属性将工具提示夹住并直接将其附加在身体上。例如,如果您有滚动区域,则可以使工具提示位置。此选项进行重量的JavaScript计算。
工具提示 - show =“”字符串(布尔)错误的显示/隐藏工具提示“手动”

全球群体

有时,您可能需要将所有工具提示选项设置在一个地方,您可以使用tooltipsConfProvider这样实现此目的:

 . config ( [ 'tooltipsConfProvider' , function configConf ( tooltipsConfProvider ) {
  tooltipsConfProvider . configure ( {
    'smart' : true ,
    'size' : 'large' ,
    'speed' : 'slow' ,
    'tooltipTemplateUrlCache' : true
    //etc...
  } ) ;
} ] ) 

例子

现场演示

主题

您可以通过编辑默认的SASS文件lib/angular-tooltips.scss或仅编辑默认的CSS文件dist/angular-tooltips.css来创建自己的主题。

贡献

如果您帮助我们使这个项目成长,我们将非常感激。随意通过分叉,开头问题,拉请请求等做出贡献。

执照

麻省理工学院许可证(MIT)

版权(C)2014 Filippo Oretti,Dario Andrei

特此免费获得许可,免费授予任何获得此软件副本和相关文档文件(“软件”)的人,以无限制地处理软件,包括无限制的使用权,复制,复制,修改,合并,发布,分发,分发,分发,分配,sublicense和/或允许软件允许与以下条件相关的软件,以下是以下条件。

上述版权通知和此许可通知应包含在软件的所有副本或大量部分中。

该软件是“原样”提供的,没有任何形式的明示或暗示保证,包括但不限于适销性,特定目的的适用性和非侵权的保证。在任何情况下,作者或版权持有人都不应对任何索赔,损害赔偿或其他责任责任,无论是在合同,侵权的诉讼中还是其他责任,是由软件,使用或与软件中的使用或其他交易有关的。

下载源码

通过命令行克隆项目:

git clone https://github.com/720kb/angular-tooltips.git