angular tooltips

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

angular tooltips是由720KB开发的。

要求

Angularjs v1.3+

屏幕

浏览器支持

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

加载

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

 <!DOCTYPE HTML >
< 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页面中，请致电指令

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

Doc

选项	类型	默认	描述
工具提示方=“”	string（“左”，“右”，“顶”，“底部”，“左上”，“右上”，“左下”，“右下”）	'顶部'	将工具提示设置为显示在`left`或`right` ， `top`或`bottom`或`top left`或`top right`或`bottom left`或`bottom 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和/或允许软件允许与以下条件相关的软件，以下是以下条件。

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

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

angular tooltips