Permalink
Oct 1, 2021
Jul 6, 2014
Jul 6, 2014
Jul 6, 2014
Jul 6, 2014
Jul 6, 2014
Jul 6, 2014
Jul 6, 2014
Jul 6, 2014
Jul 6, 2014
May 21, 2016
Jul 6, 2014
May 21, 2016
Jul 6, 2014
Nov 22, 2015
Jul 6, 2014
Nov 22, 2015
Jul 6, 2014
Jul 6, 2014
Mar 26, 2016
Nov 22, 2015
Jul 6, 2014
Jul 6, 2014
Mar 26, 2016
Nov 22, 2015
Jul 6, 2014
Jul 6, 2014
Jul 6, 2014
Jul 6, 2014
Mar 26, 2016
Jul 6, 2014
Jul 6, 2014
Jul 6, 2014
Jul 6, 2014
Mar 26, 2016
Jul 6, 2014
Nov 22, 2015
Mar 26, 2016
Mar 26, 2016
Nov 22, 2015
Nov 22, 2015
Mar 26, 2016
Mar 26, 2016
Nov 22, 2015
Nov 22, 2015
Mar 26, 2016
Mar 26, 2016
Nov 22, 2015
Nov 22, 2015
Mar 26, 2016
Mar 26, 2016
Nov 22, 2015
Mar 7, 2016
Mar 7, 2016
Jul 6, 2014
Mar 26, 2016
Nov 22, 2015
Mar 26, 2016
Nov 22, 2015
Mar 26, 2016
Jul 6, 2014
Mar 26, 2016
Nov 22, 2015
Mar 26, 2016
Nov 22, 2015
Mar 26, 2016
Jul 6, 2014
Mar 26, 2016
Jul 6, 2014
Mar 26, 2016
Jul 6, 2014
Newer
100644
466 lines (385 sloc)
10.8 KB
1
/*! Hint.css (base version) - v2.7.0 - 2021-10-01
2
* https://kushagra.dev/lab/hint/
3
* Copyright (c) 2021 Kushagra Gour */
7
\*-------------------------------------*/
8
/**
9
* HINT.css is a tooltip library made in pure CSS.
10
*
11
* Source: https://github.com/chinchang/hint.css
12
* Demo: http://kushagragour.in/lab/hint/
13
*
14
*/
15
/**
16
* source: hint-core.scss
17
*
18
* Defines the basic styling for the tooltip.
19
* Each tooltip is made of 2 parts:
20
* 1) body (:after)
21
* 2) arrow (:before)
22
*
23
* Classes added:
24
* 1) hint
25
*/
27
position: relative;
28
display: inline-block;
29
/**
32
/**
36
position: absolute;
37
-webkit-transform: translate3d(0, 0, 0);
38
-moz-transform: translate3d(0, 0, 0);
39
transform: translate3d(0, 0, 0);
40
visibility: hidden;
41
opacity: 0;
42
z-index: 1000000;
43
pointer-events: none;
44
-webkit-transition: 0.3s ease;
45
-moz-transition: 0.3s ease;
46
transition: 0.3s ease;
47
-webkit-transition-delay: 0ms;
48
-moz-transition-delay: 0ms;
49
transition-delay: 0ms; }
51
visibility: visible;
52
opacity: 1; }
54
-webkit-transition-delay: 100ms;
55
-moz-transition-delay: 100ms;
56
transition-delay: 100ms; }
58
content: '';
59
position: absolute;
60
background: transparent;
61
border: 6px solid transparent;
62
z-index: 1000001; }
64
background: #383838;
65
color: white;
66
padding: 8px 10px;
67
font-size: 12px;
69
line-height: 12px;
70
white-space: nowrap; }
71
[class*="hint--"][aria-label]:after {
72
content: attr(aria-label); }
73
[class*="hint--"][data-hint]:after {
74
content: attr(data-hint); }
75
76
[aria-label='']:before, [aria-label='']:after,
77
[data-hint='']:before,
78
[data-hint='']:after {
81
/**
82
* source: hint-position.scss
83
*
84
* Defines the positoning logic for the tooltips.
85
*
86
* Classes added:
87
* 1) hint--top
88
* 2) hint--bottom
89
* 3) hint--left
90
* 4) hint--right
91
*/
92
/**
93
* set default color for tooltip arrows
94
*/
95
.hint--top-left:before {
96
border-top-color: #383838; }
97
98
.hint--top-right:before {
99
border-top-color: #383838; }
100
101
.hint--top:before {
102
border-top-color: #383838; }
103
104
.hint--bottom-left:before {
105
border-bottom-color: #383838; }
106
107
.hint--bottom-right:before {
108
border-bottom-color: #383838; }
109
110
.hint--bottom:before {
111
border-bottom-color: #383838; }
112
113
.hint--left:before {
114
border-left-color: #383838; }
115
116
.hint--right:before {
117
border-right-color: #383838; }
118
119
/**
120
* top tooltip
121
*/
122
.hint--top:before {
125
.hint--top:before, .hint--top:after {
126
bottom: 100%;
127
left: 50%; }
138
-webkit-transform: translateY(-8px);
139
-moz-transform: translateY(-8px);
140
transform: translateY(-8px); }
141
143
-webkit-transform: translateX(-50%) translateY(-8px);
144
-moz-transform: translateX(-50%) translateY(-8px);
145
transform: translateX(-50%) translateY(-8px); }
146
147
/**
148
* bottom tooltip
149
*/
150
.hint--bottom:before {
153
.hint--bottom:before, .hint--bottom:after {
154
top: 100%;
155
left: 50%; }
166
-webkit-transform: translateY(8px);
167
-moz-transform: translateY(8px);
168
transform: translateY(8px); }
169
171
-webkit-transform: translateX(-50%) translateY(8px);
172
-moz-transform: translateX(-50%) translateY(8px);
173
transform: translateX(-50%) translateY(8px); }
174
175
/**
176
* right tooltip
177
*/
178
.hint--right:before {
180
margin-bottom: -6px; }
182
.hint--right:after {
183
margin-bottom: -14px; }
185
.hint--right:before, .hint--right:after {
186
left: 100%;
187
bottom: 50%; }
190
-webkit-transform: translateX(8px);
191
-moz-transform: translateX(8px);
192
transform: translateX(8px); }
193
195
-webkit-transform: translateX(8px);
196
-moz-transform: translateX(8px);
197
transform: translateX(8px); }
198
199
/**
200
* left tooltip
201
*/
202
.hint--left:before {
204
margin-bottom: -6px; }
206
.hint--left:after {
207
margin-bottom: -14px; }
209
.hint--left:before, .hint--left:after {
210
right: 100%;
211
bottom: 50%; }
214
-webkit-transform: translateX(-8px);
215
-moz-transform: translateX(-8px);
216
transform: translateX(-8px); }
217
219
-webkit-transform: translateX(-8px);
220
-moz-transform: translateX(-8px);
221
transform: translateX(-8px); }
222
228
229
.hint--top-left:before, .hint--top-left:after {
230
bottom: 100%;
231
left: 50%; }
232
233
.hint--top-left:before {
234
left: calc(50% - 6px); }
235
236
.hint--top-left:after {
245
-webkit-transform: translateY(-8px);
246
-moz-transform: translateY(-8px);
247
transform: translateY(-8px); }
250
-webkit-transform: translateX(-100%) translateY(-8px);
251
-moz-transform: translateX(-100%) translateY(-8px);
252
transform: translateX(-100%) translateY(-8px); }
253
254
/**
255
* top-right tooltip
256
*/
257
.hint--top-right:before {
259
260
.hint--top-right:before, .hint--top-right:after {
261
bottom: 100%;
262
left: 50%; }
263
264
.hint--top-right:before {
265
left: calc(50% - 6px); }
266
267
.hint--top-right:after {
276
-webkit-transform: translateY(-8px);
277
-moz-transform: translateY(-8px);
278
transform: translateY(-8px); }
279
281
-webkit-transform: translateY(-8px);
282
-moz-transform: translateY(-8px);
283
transform: translateY(-8px); }
284
285
/**
286
* bottom-left tooltip
287
*/
288
.hint--bottom-left:before {
290
291
.hint--bottom-left:before, .hint--bottom-left:after {
292
top: 100%;
293
left: 50%; }
294
295
.hint--bottom-left:before {
296
left: calc(50% - 6px); }
297
298
.hint--bottom-left:after {
307
-webkit-transform: translateY(8px);
308
-moz-transform: translateY(8px);
309
transform: translateY(8px); }
312
-webkit-transform: translateX(-100%) translateY(8px);
313
-moz-transform: translateX(-100%) translateY(8px);
314
transform: translateX(-100%) translateY(8px); }
315
316
/**
317
* bottom-right tooltip
318
*/
319
.hint--bottom-right:before {
321
322
.hint--bottom-right:before, .hint--bottom-right:after {
323
top: 100%;
324
left: 50%; }
325
326
.hint--bottom-right:before {
327
left: calc(50% - 6px); }
328
329
.hint--bottom-right:after {
338
-webkit-transform: translateY(8px);
339
-moz-transform: translateY(8px);
340
transform: translateY(8px); }
343
-webkit-transform: translateY(8px);
344
-moz-transform: translateY(8px);
345
transform: translateY(8px); }
346
347
/**
348
* source: hint-sizes.scss
349
*
350
* Defines width restricted tooltips that can span
351
* across multiple lines.
352
*
353
* Classes added:
354
* 1) hint--small
355
* 2) hint--medium
356
* 3) hint--large
357
*
358
*/
359
.hint--small:after,
360
.hint--medium:after,
361
.hint--large:after {
362
white-space: normal;
365
366
.hint--small:after {
367
width: 80px; }
368
369
.hint--medium:after {
370
width: 150px; }
371
372
.hint--large:after {
373
width: 300px; }
374
375
/**
376
* source: hint-always.scss
377
*
378
* Defines a persisted tooltip which shows always.
379
*
380
* Classes added:
381
* 1) hint--always
382
*
383
*/
384
.hint--always:after, .hint--always:before {
385
opacity: 1;
386
visibility: visible; }
388
.hint--always.hint--top:before {
389
-webkit-transform: translateY(-8px);
390
-moz-transform: translateY(-8px);
391
transform: translateY(-8px); }
392
393
.hint--always.hint--top:after {
394
-webkit-transform: translateX(-50%) translateY(-8px);
395
-moz-transform: translateX(-50%) translateY(-8px);
396
transform: translateX(-50%) translateY(-8px); }
397
398
.hint--always.hint--top-left:before {
399
-webkit-transform: translateY(-8px);
400
-moz-transform: translateY(-8px);
401
transform: translateY(-8px); }
402
403
.hint--always.hint--top-left:after {
404
-webkit-transform: translateX(-100%) translateY(-8px);
405
-moz-transform: translateX(-100%) translateY(-8px);
406
transform: translateX(-100%) translateY(-8px); }
407
408
.hint--always.hint--top-right:before {
409
-webkit-transform: translateY(-8px);
410
-moz-transform: translateY(-8px);
411
transform: translateY(-8px); }
412
413
.hint--always.hint--top-right:after {
414
-webkit-transform: translateY(-8px);
415
-moz-transform: translateY(-8px);
416
transform: translateY(-8px); }
418
.hint--always.hint--bottom:before {
419
-webkit-transform: translateY(8px);
420
-moz-transform: translateY(8px);
421
transform: translateY(8px); }
422
423
.hint--always.hint--bottom:after {
424
-webkit-transform: translateX(-50%) translateY(8px);
425
-moz-transform: translateX(-50%) translateY(8px);
426
transform: translateX(-50%) translateY(8px); }
427
428
.hint--always.hint--bottom-left:before {
429
-webkit-transform: translateY(8px);
430
-moz-transform: translateY(8px);
431
transform: translateY(8px); }
432
433
.hint--always.hint--bottom-left:after {
434
-webkit-transform: translateX(-100%) translateY(8px);
435
-moz-transform: translateX(-100%) translateY(8px);
436
transform: translateX(-100%) translateY(8px); }
437
438
.hint--always.hint--bottom-right:before {
439
-webkit-transform: translateY(8px);
440
-moz-transform: translateY(8px);
441
transform: translateY(8px); }
442
443
.hint--always.hint--bottom-right:after {
444
-webkit-transform: translateY(8px);
445
-moz-transform: translateY(8px);
446
transform: translateY(8px); }
448
.hint--always.hint--left:before {
449
-webkit-transform: translateX(-8px);
450
-moz-transform: translateX(-8px);
451
transform: translateX(-8px); }
452
453
.hint--always.hint--left:after {
454
-webkit-transform: translateX(-8px);
455
-moz-transform: translateX(-8px);
456
transform: translateX(-8px); }
458
.hint--always.hint--right:before {
459
-webkit-transform: translateX(8px);
460
-moz-transform: translateX(8px);
461
transform: translateX(8px); }
462
463
.hint--always.hint--right:after {
464
-webkit-transform: translateX(8px);
465
-moz-transform: translateX(8px);
466
transform: translateX(8px); }