-
Notifications
You must be signed in to change notification settings - Fork 12
/
test.html
290 lines (285 loc) · 18.8 KB
/
test.html
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
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="author" content="Jack Domleo">
<link rel="icon" href="./icon.png" />
<title>Cooltipz.css - Test development file</title>
<link rel="stylesheet" href="./cooltipz.min.css" />
<link rel="stylesheet" href="https://cooltipz.jackdomleo.dev/css/docs.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
:root {
--cooltipz-fontawesome: FontAwesome;
}
body {
font-family: sans-serif;
}
label {
cursor: pointer;
}
button {
margin-left: 8rem;
}
</style>
</head>
<body>
<div>
<header>
<h1>Cooltipz.css Test File</h1>
<h2>Cool tooltips made from pure CSS</h2>
<a href="https://cooltipz.jackdomleo.dev" rel="noreferrer" target="_blank">View official docs</a>
<h3>Checklist</h3>
<ul>
<li><label><input type="checkbox" /> Pure CSS</label></li>
<li><label><input type="checkbox" /> No JavaScript required</label></li>
<li><label><input type="checkbox" /> Accessible with <code>aria-label</code> attributes</label></li>
<li><label><input type="checkbox" /> Tooltips appear on <em>hover</em> and <em>focus</em></label></li>
<li><label><input type="checkbox" /> Options to use classes or <code>data-</code> attributes</label></li>
<li><label><input type="checkbox" /> No animations when <code>prefers-reduced-motion</code> is set</label></li>
<li><label><input type="checkbox" /> Support Font Awesome, HTML special characters, emojis and multilingual text</label></li>
<li><label><input type="checkbox" /> Can customise every available <code>--cooltipz-</code> CSS variable</label></li>
</ul>
</header>
<hr/>
<main>
<section>
<h3>Tooltip Direction<sup>*</sup><small> - (exactly <u>one</u> direction is required for the tooltip to display)</small></h3>
<button data-cooltipz-dir="top" aria-label="Hello there!">data: top</button>
<button data-cooltipz-dir="bottom" aria-label="Hello there!">data: bottom</button>
<button data-cooltipz-dir="right" aria-label="Hello there!">data: right</button>
<button data-cooltipz-dir="left" aria-label="Hello there!">data: left</button>
<br/>
<br/>
<button class="cooltipz--top" aria-label="Hello there!">class: top</button>
<button class="cooltipz--bottom" aria-label="Hello there!">class: bottom</button>
<button class="cooltipz--right" aria-label="Hello there!">class: right</button>
<button class="cooltipz--left" aria-label="Hello there!">class: left</button>
<br/>
<br/>
<button data-cooltipz-dir="top-left" aria-label="Hello there!">data: top-left</button>
<button data-cooltipz-dir="top-right" aria-label="Hello there!">data: top-right</button>
<button data-cooltipz-dir="bottom-left" aria-label="Hello there!">data: bottom-left</button>
<button data-cooltipz-dir="bottom-right" aria-label="Hello there!">data: bottom-right</button>
<br/>
<br/>
<button class="cooltipz--top-left" aria-label="Hello there!">class: top-left</button>
<button class="cooltipz--top-right" aria-label="Hello there!">class: top-right</button>
<button class="cooltipz--bottom-left" aria-label="Hello there!">class: bottom-left</button>
<button class="cooltipz--bottom-right" aria-label="Hello there!">class: bottom-right</button>
<br/>
<br/>
<p>[class*="cooltipz"] check</p>
<button class="random-class cooltipz--top" aria-label="Hello there!">class: top</button>
<button class="random-class cooltipz--bottom" aria-label="Hello there!">class: bottom</button>
<button class="random-class cooltipz--right" aria-label="Hello there!">class: right</button>
<button class="random-class cooltipz--left" aria-label="Hello there!">class: left</button>
<br/>
<br/>
<button class="random-class cooltipz--top-left" aria-label="Hello there!">class: top-left</button>
<button class="random-class cooltipz--top-right" aria-label="Hello there!">class: top-right</button>
<button class="random-class cooltipz--bottom-left" aria-label="Hello there!">class: bottom-left</button>
<button class="random-class cooltipz--bottom-right" aria-label="Hello there!">class: bottom-right</button>
</section>
<hr/>
<section>
<h3>No Animation</h3>
<p>Animations can be disabled by apply the <code>data-cooltipz-static</code> attribute or the <code>.cooltipz--static</code> class. Cooltipz.css also use the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion" rel="norefferer nofollow" target="_blank">prefers-reduced-motion</a> media query, so when the user's preferences indicate reduced motion, Cooltipz.css automatically disables animation.</p>
<button data-cooltipz-dir="top" data-cooltipz-static aria-label="Hello there!">data: top</button>
<button data-cooltipz-dir="bottom" data-cooltipz-static aria-label="Hello there!">data: bottom</button>
<button data-cooltipz-dir="right" data-cooltipz-static aria-label="Hello there!">data: right</button>
<button data-cooltipz-dir="left" data-cooltipz-static aria-label="Hello there!">data: left</button>
<br/>
<br/>
<button class="cooltipz--top cooltipz--static" aria-label="Hello there!">class: top</button>
<button class="cooltipz--bottom cooltipz--static" aria-label="Hello there!">class: bottom</button>
<button class="cooltipz--right cooltipz--static" aria-label="Hello there!">class: right</button>
<button class="cooltipz--left cooltipz--static" aria-label="Hello there!">class: left</button>
<br/>
<br/>
<button data-cooltipz-dir="top-left" data-cooltipz-static aria-label="Hello there!">data: top-left</button>
<button data-cooltipz-dir="top-right" data-cooltipz-static aria-label="Hello there!">data: top-right</button>
<button data-cooltipz-dir="bottom-left" data-cooltipz-static aria-label="Hello there!">data: bottom-left</button>
<button data-cooltipz-dir="bottom-right" data-cooltipz-static aria-label="Hello there!">data: bottom-right</button>
<br/>
<br/>
<button class="cooltipz--top-left cooltipz--static" aria-label="Hello there!">class: top-left</button>
<button class="cooltipz--top-right cooltipz--static" aria-label="Hello there!">class: top-right</button>
<button class="cooltipz--bottom-left cooltipz--static" aria-label="Hello there!">class: bottom-left</button>
<button class="cooltipz--bottom-right cooltipz--static" aria-label="Hello there!">class: bottom-right</button>
</section>
<hr/>
<section>
<h3>Always Visible</h3>
<p>You can add the <code>data-cooltipz-visible</code> attribute or the <code>.cooltipz--visible</code> class to make the tooltip always show, even if the user isn't hovering or focusing it.</p>
<p>You can make the tooltips show programatically by using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute" rel="norefferer nofollow"><code>setAttribute()</code> JavaScript function</a>.</p>
<button data-cooltipz-dir="top" data-cooltipz-visible aria-label="Hello there!">data: top</button>
<button data-cooltipz-dir="bottom" data-cooltipz-visible aria-label="Hello there!">data: bottom</button>
<button data-cooltipz-dir="left" data-cooltipz-visible aria-label="Hello there!">data: left</button>
<button data-cooltipz-dir="right" data-cooltipz-visible aria-label="Hello there!">data: right</button>
<br/>
<br/>
<button class="cooltipz--top cooltipz--visible" aria-label="Hello there!">class: top</button>
<button class="cooltipz--bottom cooltipz--visible" aria-label="Hello there!">class: bottom</button>
<button class="cooltipz--left cooltipz--visible" aria-label="Hello there!">class: left</button>
<button class="cooltipz--right cooltipz--visible" aria-label="Hello there!">class: right</button>
<br/>
<br/>
<button data-cooltipz-dir="bottom-left" data-cooltipz-visible aria-label="Hello there!">data: bottom-left</button>
<button data-cooltipz-dir="bottom-right" data-cooltipz-visible aria-label="Hello there!">data: bottom-right</button>
<button data-cooltipz-dir="top-left" data-cooltipz-visible aria-label="Hello there!">data: top-left</button>
<button data-cooltipz-dir="top-right" data-cooltipz-visible aria-label="Hello there!">data: top-right</button>
<br/>
<br/>
<button class="cooltipz--bottom-left cooltipz--visible" aria-label="Hello there!">class: bottom-left</button>
<button class="cooltipz--bottom-right cooltipz--visible" aria-label="Hello there!">class: bottom-right</button>
<button class="cooltipz--top-left cooltipz--visible" aria-label="Hello there!">class: top-left</button>
<button class="cooltipz--top-right cooltipz--visible" aria-label="Hello there!">class: top-right</button>
</section>
<hr/>
<section>
<h3>Sizes</h3>
<button data-cooltipz-dir="top" data-cooltipz-size="fit" aria-label="Hello there!">data: fit</button>
<button data-cooltipz-dir="top" data-cooltipz-size="small" aria-label="Hello there! How are you?">data: small</button>
<button data-cooltipz-dir="top" data-cooltipz-size="medium" aria-label="Hello there! How are you? How's your day going?">data: medium</button>
<button data-cooltipz-dir="top" data-cooltipz-size="large" aria-label="Hello there! How are you? How's your day going? What's your favourite colour?">data: large</button>
<button data-cooltipz-dir="top" data-cooltipz-size="custom" aria-label="Hello there!
How are you?
How's your day going?
What's your favourite colour?">data: custom</button>
<br/>
<button class="cooltipz--bottom cooltipz--fit" aria-label="Hello there!">class: fit</button>
<button class="cooltipz--bottom cooltipz--small" aria-label="Hello there! How are you?">class: small</button>
<button class="cooltipz--bottom cooltipz--medium" aria-label="Hello there! How are you? How's your day going?">class: medium</button>
<button class="cooltipz--bottom cooltipz--large" aria-label="Hello there! How are you? How's your day going? What's your favourite colour?">class: medium</button>
<button class="cooltipz--bottom cooltipz--custom" aria-label="Hello there!
How are you?
How's your day going?
What's your favourite colour?">class: custom</button>
</section>
<hr/>
<section>
<h3>Content</h3>
<p>Should support <strong>HTML special characters</strong>, <strong>emojis</strong>, <strong>multilingual</strong>, <strong>Font Awesome</strong>.</p>
<button data-cooltipz-dir="top" aria-label="Font Awesome:    ">Font Awesome</button>
<button data-cooltipz-dir="top" aria-label="HTML special characters: ® © µ π δ σ ♻ ♫">HTML special characters</button>
<button data-cooltipz-dir="top" aria-label="Emojis: 😎💩🍔🚗">Emojis</button>
<button data-cooltipz-dir="top" aria-label="Multilingual: こんにちは | ਸਤ ਸ੍ਰੀ ਅਕਾਲ | हैलो">Multilingual</button>
</section>
<hr/>
<section>
<h3>Customisation</h3>
<p>Expose 16 CSS variables: <code>--cooltipz-bg-color</code>, <code>--cooltipz-border-width</code>, <code>--cooltipz-border-style</code>, <code>--cooltipz-border-color</code>, <code>--cooltipz-text-color</code>, <code>--cooltipz-font-size</code>, <code>--cooltipz-slide</code>, <code>--cooltipz-border-radius</code>, <code>--cooltipz-timing</code>, <code>--cooltipz-cursor</code>, <code>--cooltipz-small</code>, <code>--cooltipz-medium</code>, <code>--cooltipz-large</code>, <code>--cooltipz-arrow-size</code>, <code>--cooltipz-delay-show</code>, <code>--cooltipz-delay-hide</code>.</p>
<style>
.custom--one{
--cooltipz-bg-color: #fff; --cooltipz-text-color: #000; --cooltipz-font-size: 1.5rem; --cooltipz-slide: 50px; --cooltipz-border-radius: 1rem; --cooltipz-timing: 1s; --cooltipz-cursor: help;
}
.custom--size{
--cooltipz-bg-color: #fff; --cooltipz-text-color: #000; --cooltipz-font-size: 1.5rem; --cooltipz-slide: 50px; --cooltipz-border-radius: 1rem; --cooltipz-timing: 1s; --cooltipz-cursor: help; --cooltipz-small: 4rem; --cooltipz-medium: 8rem; --cooltipz-large: 12rem;
}
.custom--two {
--cooltipz-arrow-size: 0.75rem;
}
.custom--three {
--cooltipz-arrow-size: 1.5rem;
--cooltipz-border-radius: 0 inherit inherit 0;
}
.custom--four {
--cooltipz-delay-show: 1s;
--cooltipz-delay-hide: 2s;
}
.custom--five {
--cooltipz-border-width: 2px;
--cooltipz-border-color: #000;
--cooltipz-bg-color: #fff;
--cooltipz-text-color: #000;
}
</style>
<button class="custom--one" data-cooltipz-dir="top" aria-label="I've been customised!">Custom</button>
<button class="custom--size" data-cooltipz-dir="top" data-cooltipz-size="small" aria-label="I'm a small tooltip and I've been customised!">Custom</button>
<button class="custom--size" data-cooltipz-dir="bottom" data-cooltipz-size="medium" aria-label="I'm a medium tooltip and I've been customised!">Custom</button>
<button class="custom--size" data-cooltipz-dir="right" data-cooltipz-size="large" aria-label="I'm a large tooltip and I've been customised!">Custom</button>
<button class="custom--two" data-cooltipz-dir="right" aria-label="Hello there!">Custom</button>
<button class="custom--three" data-cooltipz-dir="right" aria-label="Hello there!">Custom</button>
<button class="custom--four" data-cooltipz-dir="right" aria-label="Hello there!">Custom</button>
<button class="custom--five" data-cooltipz-dir="right" aria-label="Hello there!">Custom</button>
</section>
<style>
.examples {
margin: 50vh 0 16rem 0;
width: 100%;
}
.examples h3 {
margin-bottom: 6rem;
}
.examples div {
margin: 5rem 0;
display: flex;
align-items: center;
justify-content: center;
}
.examples button {
margin: 0 0.5rem;
}
.examples .custom {
--cooltipz-bg-color: #fff;
--cooltipz-text-color: #000;
--cooltipz-font-size: 2.4rem;
--cooltipz-slide: 50px;
--cooltipz-border-radius: 1rem;
--cooltipz-timing: 700ms;
--cooltipz-cursor: help;
}
.examples .custom--small {
--cooltipz-small: 4.5rem;
}
.examples .custom--medium {
--cooltipz-medium: 8rem;
}
.examples .custom--large {
--cooltipz-large: 12rem;
}
</style>
<section class="examples">
<h3>Examples - use these to create a gif</h3>
<div>
<button data-cooltipz-dir="left" aria-label="Hello there!">Left</button>
<button data-cooltipz-dir="top" aria-label="Hello there!">Top</button>
<button data-cooltipz-dir="bottom" aria-label="Hello there!">Bottom</button>
<button data-cooltipz-dir="right" aria-label="Hello there!">Right</button>
</div>
<div>
<button data-cooltipz-dir="bottom-left" aria-label="Hello there!">Bottom left</button>
<button data-cooltipz-dir="top-left" aria-label="Hello there!">Top left</button>
<button data-cooltipz-dir="top-right" aria-label="Hello there!">Top right</button>
<button data-cooltipz-dir="bottom-right" aria-label="Hello there!">Bottom right</button>
</div>
<div>
<button data-cooltipz-dir="top" data-cooltipz-size="small" aria-label="Hello there! I am a small tooltip and I will wrap the text within me.">
Small
</button>
<button data-cooltipz-dir="top" data-cooltipz-size="medium" aria-label="Hello there! I am a medium tooltip and I will wrap the text within me. I'm wider thhan the small tooltip.">
Medium
</button>
<button data-cooltipz-dir="top" data-cooltipz-size="large" aria-label="Hello there! I am a large tooltip and I will wrap the text within me. I'm wider thhan the small and the medium tooltip.">
Large
</button>
<button data-cooltipz-dir="top" data-cooltipz-size="fit" aria-label="Hello there! I am a 'fit' tooltip and I will wrap the text within me. My width will always be equal to the width of my parent element.">
Fit
</button>
</div>
<div>
<button data-cooltipz-dir="top" data-cooltipz-static aria-label="Hello there!">
No animation
</button>
<button data-cooltipz-dir="top" data-cooltipz-visible aria-label="Hello there!">
Visible
</button>
</div>
<div>
<button class="custom--small" data-cooltipz-dir="bottom" data-cooltipz-size="small" aria-label="I'm a small tooltip with a custom width.">Custom small</button>
<button class="custom--medium" data-cooltipz-dir="bottom" data-cooltipz-size="medium" aria-label="I'm a medium tooltip with a custom width.">Custom medium</button>
<button class="custom--large" data-cooltipz-dir="bottom" data-cooltipz-size="large" aria-label="I'm a large tooltip with a custom width. I'm smaller than my default size.">Custom large</button>
<button class="custom" data-cooltipz-dir="bottom" aria-label="Hello there!">Custom</button>
</div>
</section>
</main>
</div>
</body>
</html>