angular-tooltips/index.html at master · cs-NET/angular-tooltips · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!doctype html>
<htmlng-app="720kb">
<head>
<linkrel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css">
<linkrel="stylesheet" type="text/css" href="http://720kb.github.io/csshelper/assets/ext/src/helper.css">
<linkrel="stylesheet" type="text/css" href="src/css/angular-tooltips.css">
<linkrel="stylesheet" type="text/css" href="cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css"/>
<title>Angularjs Tooltips</title>
</head>
<bodyclass="center-content" ng-controller="Ctrl">
<divclass="separator100"></div>
<divclass="col6 offset-left2">
<divng-repeat="item in items">
<atooltipstooltip-html="{{generateHTMLextra(item)}}"> item</a>
</div>
<div>
 With just an icon (Hover the icon) <iclass="fa fa-trash-o clickable-icon" tooltipstooltip-title="title" tooltip-size="small"></i>

<divclass="separator30"></div>
<aclass="btn btn-medium bg-info color-white font-bold"
tooltip-delay="400"
tooltip-scroll="true"
tooltip-content="Yeo man!"
tooltip-view="views/index.html"
tooltip-view-ctrl="Ctrl"
tooltip-size="small"
tooltip-side="left"
tooltips
tooltip-hide-trigger="click"
tooltip-hide-target="tooltip"
tooltip-title="hey!">
 Small left
</a>
</div>
<divclass="separator30"></div>
<div>
<aclass="btn btn-medium bg-info color-white font-bold" tooltipstooltip-content="Yeo man!" tooltip-hide-trigger="click" tooltip-size="medium" tooltip-side="left" title="Title attr" >
 Medium left
</a>
</div>

<divclass="separator30"></div>
<div>
<aclass="btn btn-medium bg-info color-white font-bold" tooltipstooltip-content="Yeo man!" tooltip-size="large" tooltip-side="left" >
 Large left
</a>
</div>

<divclass="separator100"></div>
<div>
<aclass="btn btn-medium bg-info color-white font-bold" tooltipstooltip-content="Yeo man!" tooltip-size="small" tooltip-side="right" >
 Small right
</a>
</div>

<divclass="separator30"></div>
<div>
<aclass="btn btn-medium bg-info color-white font-bold" tooltipstooltip-content="Yeo man!" tooltip-size="medium" tooltip-side="right" >
 Medium right
</a>
</div>

<divclass="separator30"></div>
<div>
<aclass="btn btn-medium bg-info color-white font-bold" tooltipstooltip-content="Yeo man!" tooltip-size="large" tooltip-side="right" >
 Large right
</a>
</div>
<divclass="separator100"></div>
<div>
<aclass="btn btn-medium bg-info color-white font-bold" tooltipstooltip-content="Yeo man!" tooltip-size="small" tooltip-side="top" >
 Small top
</a>
</div>

<divclass="separator30"></div>
<div>
<aclass="btn btn-medium bg-info color-white font-bold" tooltipstooltip-content="Yeo man!" tooltip-size="medium" tooltip-side="top" >
 Medium top
</a>
</div>

<divclass="separator30"></div>
<div>
<aclass="btn btn-medium bg-info color-white font-bold" tooltipstooltip-content="Yeo man!" tooltip-size="large" tooltip-side="top" >
 Large top
</a>
</div>
<divclass="separator100"></div>
<div>
<aclass="btn btn-medium bg-info color-white font-bold" tooltipstooltip-content="Yeo man!" tooltip-size="small" tooltip-side="bottom" >
 Small bottom
</a>
</div>

<divclass="separator30"></div>
<div>
<aclass="btn btn-medium bg-info color-white font-bold" tooltipstooltip-content="Yeo man!" tooltip-size="medium" tooltip-side="bottom" >
 Medium bottom
</a>
</div>

<divclass="separator30"></div>
<div>
<aclass="btn btn-medium bg-info color-white font-bold" tooltipstooltip-content="Yeo man!" tooltip-size="large" tooltip-side="bottom" >
 Large bottom
</a>
</div>
<divclass="separator100"></div>

<divclass="separator30"></div>
<div>
<aclass="btn btn-medium bg-info color-white font-bold" tooltipstooltip-content="Yeo man!" tooltip-show-trigger="mouseover click" tooltip-hide-trigger="click" tooltip-close-button='<button type="button">Close Me!</button>' tooltip-side="top">
 Close button: hover to open, click to close
</a>
</div>

<divclass="separator30"></div>
<div>
<aclass="btn btn-medium bg-info color-white font-bold" tooltipstooltip-content="Yeo man! I have some more to say to show the positioning of the close button" tooltip-show-trigger="click" tooltip-hide-trigger="click" tooltip-close-button='<button type="button">Close Me!</button>' tooltip-side="bottom">
 Close button: click to open and close
</a>
</div>
<divclass="separator30"></div>
<div>
<aclass="btn btn-medium bg-info color-white font-bold"
tooltips
tooltip-delay="400"
tooltip-scroll="true"
tooltip-content="Yeo man!"
tooltip-size="large"
tooltip-hide-trigger="click"
tooltip-hide-target="tooltip"
tooltip-title="Click tooltip to hide tooltip">
 Hide Target = tooltip
</a>
</div>
<divclass="separator100"></div>
<divstyle="height:300px; overflow-y:scroll">
<divstyle="height:600px;">
<aclass="btn btn-medium bg-info color-white font-bold" tooltipstooltip-scroll="true" tooltip-content="Yeo man!" tooltip-hide-trigger="click" tooltip-size="medium" tooltip-side="left" title="Title attr">
 Scrollable
</a>
</div>
</div>
</div>
<scripttype="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<scripttype="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-route.min.js"></script>
<scripttype="text/javascript" src="src/js/angular-tooltips.js"></script>
<scripttype="text/javascript" src="assets/js/index.js"></script>
</body>
</html>