Skip to content
Permalink
Newer
Older
100644 361 lines (334 sloc) 10.5 KB
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<meta charset="utf-8">
5
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6
<title>Hint.css - A tooltip library in CSS</title>
7
<meta name="description" content="A CSS only tooltip library">
8
<meta name="viewport" content="width=device-width">
9
<link href='https://fonts.googleapis.com/css?family=Lobster&display=swap' rel='stylesheet' type='text/css'>
10
11
<link rel="image_src" href="hint.png"/>
12
13
<style type="text/css">
14
body {
15
text-align: center;
16
font-family: Arial;
17
background: #D9623F;
18
min-height: 100vh;
19
font-size: 18px;
20
padding: 0;
21
margin: 0;
22
color: white;
23
}
24
25
h1 {
26
font-size: 6em;
27
text-shadow: 0 6px 1px rgba(0, 0, 0, 0.2);
28
font-family: 'Lobster', cursive;
29
}
30
h2 {
31
font-size: 4em;
32
margin: 0.5em 0;
33
text-shadow: 0 6px 1px rgba(0, 0, 0, 0.2);
34
font-family: 'Lobster', cursive;
35
}
36
.version {
37
font-size: 0.3em;
38
border-radius: 50%;
39
padding: 1px 11px;
40
text-shadow: none;
41
top: 0px;
42
position: absolute;
43
right: -65px;
44
}
45
.section {
46
padding: 3em 0;
47
position: relative;
48
}
49
.section:after {
50
content: '';
51
position: absolute;
52
bottom: -25px;
53
background: inherit;
54
left: -4px;
55
height: 50px;
56
right: -2px;
57
z-index: 1;
58
transform: rotate(2deg);
59
}
60
.section:last-of-type {
61
padding-bottom: 2em;
62
}
63
.section:last-of-type:after {
64
display: none;
65
}
66
.section--inverted:after {
67
left: -4px;
68
height: 50px;
69
right: -2px;
70
z-index: 1;
71
transform: rotate(-2deg);
72
}
73
.hero {
74
background: #5CC2F1;
75
background: #81C439;
76
background: #7D6EC6;
77
/*text-shadow: 0 3px 7px rgba(0,0,0,0.25);*/
78
}
79
.section:nth-child(2) {
80
background: #9993C1;
81
background: #8BBA66;
82
background: #5BC0EB;
83
background:
84
}
85
.section:nth-child(3) {
86
background: #D9623F;
87
background: #E4CC37;
88
/* #BD3769 */
89
/* #E18335 */
90
}
91
.section:nth-child(4) {
92
background: #7D6EC6;
93
}
94
.section:nth-child(5) {
95
background: #D9623F;
96
/*background: ##E18335;*/
97
/* #BD3769 */
98
/* #E18335 */
99
}
100
.section-inner {
101
max-width: 600px;
102
margin: 0 auto;
103
}
104
h1,h3{
105
margin: 5px 0;
106
}
107
a {
108
color: #1A5A7A;
109
color: #fff;
110
outline: none;
111
text-decoration: none;
112
}
113
.btn {
114
/*background: rgba(0,0,0,0.2);*/
115
background: white;
116
padding: 20px;
117
display: inline-block;
118
border-radius: 8px;
119
text-transform: uppercase;
120
transition: 0.3s ease;
121
}
122
.btn:hover {
123
transform: scale(1.2);
124
}
125
.download-btn {
126
color: #7D6EC6;
127
margin-top: 1em;
128
}
129
.position-grid {
130
display: flex;
131
flex-wrap: wrap;
132
}
133
.position-grid__cell {
134
flex: 1 33.33%;
135
font-size: 0.8em;
136
}
137
.position-grid__cell a {
138
display: inline-block;
139
width: 90%;
140
background: rgba(91, 192, 235, 0.37);
141
color: white;
142
margin: 2px 0;
143
padding: 16px 5px;
144
}
145
.status-icon {
146
background: indianred;
147
fill: white;
148
border-radius: 3px;
149
padding: 5px 6px 2px;
150
margin: 0 4px;
151
border: 1px solid rgba(0,0,0,0.2);
152
}
153
.features ul {
154
padding: 0;
155
list-style: none;
156
}
157
.footer {
158
color: rgba(255, 255, 255, 0.7);
159
}
160
.window {
161
background: #fff;
162
width: 50vw;
163
min-width: 450px;
164
margin: auto;
165
border: 1px solid #acacac;
166
border-radius: 6px;
167
box-shadow: 0px 6px 17px rgba(0,0,0,0.2);
168
cursor: default;
169
}
170
171
.titlebar {
172
background: linear-gradient(top, #ebebeb, #d5d5d5);
173
color: #4d494d;
174
font-size: 11pt;
175
line-height: 20px;
176
text-align: center;
177
width: 100%;
178
height: 20px;
179
border-top: 1px solid #f3f1f3;
180
border-bottom: 1px solid #b1aeb1;
181
border-top-left-radius: 6px;
182
border-top-right-radius: 6px;
183
}
184
185
.buttons {
186
padding-left: 8px;
187
padding-top: 3px;
188
float: left;
189
line-height: 0px;
190
}
191
192
.titlebar__btn {
193
font-size: 9pt;
194
line-height: 11px;
195
width: 11px;
196
height: 11px;
197
border: 1px solid rgba(0,0,0,0.15);
198
border-radius: 50%;
199
display: inline-block;
200
margin-right: 5px;
201
cursor: pointer;
202
203
}
204
.close {
205
background: #ff5c5c;
206
}
207
.minimize {
208
background: #ffbd4c;
209
}
210
.zoom {
211
background: #00ca56;
212
}
213
.titlebar__btn:hover {
214
border-color: rgba(0, 0, 0, 0.3);
215
}
216
.content {
217
padding: 50px 10px;
218
color: #777;
219
}
220
.content a {
221
color: #444;
222
}
223
.content h3 {
224
text-transform: uppercase;
225
font-size: 0.8em;
226
margin: 22px 0 0;
227
padding: 4px 0;
228
background: rgba(00,0,0,0.02);
229
color: rgba(0,0,0,0.9);
230
border-bottom: 1px solid rgba(0,0,0,0.04);
231
}
232
pre {
233
color: #555;
234
font-size: 1.5em;
235
}
236
a svg {
237
fill: rgba(255, 255, 255, 0.6);
238
}
239
a:hover svg {
240
fill: white;
241
}
242
</style>
243
<link rel="stylesheet" href="hint.css">
244
</head>
245
<body>
246
247
<div class="section hero">
248
249
<h1 style="display:inline-block;position:relative">Hint.css <small class="version">2.0</small> </h1>
250
<h3>A pure CSS tooltip library for your lovely websites</h3>
251
<br>
252
</div>
253
254
<div class="section section--inverted">
255
<h2>Tryout</h2>
256
257
<div class="window">
258
<div class="titlebar">
259
<div class="buttons">
260
<a class="titlebar__btn close hint--bottom-right" aria-label="Close"></a>
261
<a class="titlebar__btn minimize hint--bottom-right" aria-label="Minimize"></a>
262
<a class="titlebar__btn zoom hint--bottom-right" aria-label="Zoom"></a>
263
</div>
264
Try hovering over different things
265
</div>
266
<div class="content">
267
<div class="position-grid">
268
<div class="position-grid__cell"><a href="#" aria-label="bottom-right" class="hint--bottom-right">bottom-right</a></div>
269
<div class="position-grid__cell"><a href="#" aria-label="bottom" class="hint--bottom">bottom</a></div>
270
<div class="position-grid__cell"><a href="#" aria-label="bottom-left" class="hint--bottom-left">bottom-left</a></div>
271
<div class="position-grid__cell"><a href="#" aria-label="right" class="hint--right">right</a></div>
272
<div class="position-grid__cell"><a>.</a></div>
273
<div class="position-grid__cell"><a href="#" aria-label="left" class="hint--left">left</a></div>
274
<div class="position-grid__cell"><a href="#" aria-label="top-right" class="hint--top-right">top-right</a></div>
275
<div class="position-grid__cell"><a href="#" aria-label="top" class="hint--top">top</a></div>
276
<div class="position-grid__cell"><a href="#" aria-label="top-left" class="hint--top-left">top-left</a></div>
277
</div>
278
279
<h3>Color Modifiers</h3>
280
<p>
281
<a class="status-icon hint--bottom-right hint--error" style="background:indianred" aria-label="This is an error tooltip">
282
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
283
<path fill="#ffffff" d="M8.27,3L3,8.27V15.73L8.27,21H15.73L21,15.73V8.27L15.73,3M8.41,7L12,10.59L15.59,7L17,8.41L13.41,12L17,15.59L15.59,17L12,13.41L8.41,17L7,15.59L10.59,12L7,8.41" />
284
</svg>
285
</a>
286
<a class="status-icon hint--bottom-right hint--warning" style="background:orange" aria-label="This is a warning tooltip">
287
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
288
<path fill="#ffffff" d="M11,4.5H13V15.5H11V4.5M13,17.5V19.5H11V17.5H13Z" />
289
</svg>
290
</a>
291
<a class="status-icon hint--bottom-left hint--info" style="background:lightblue" aria-label="This is an info tooltip">
292
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
293
<path fill="#ffffff" d="M12,2A7,7 0 0,1 19,9C19,11.38 17.81,13.47 16,14.74V17A1,1 0 0,1 15,18H9A1,1 0 0,1 8,17V14.74C6.19,13.47 5,11.38 5,9A7,7 0 0,1 12,2M9,21V20H15V21A1,1 0 0,1 14,22H10A1,1 0 0,1 9,21M12,4A5,5 0 0,0 7,9C7,11.05 8.23,12.81 10,13.58V16H14V13.58C15.77,12.81 17,11.05 17,9A5,5 0 0,0 12,4Z" />
294
</svg>
295
</a>
296
<a class="status-icon hint--bottom-right hint--success" style="background:lightgreen" aria-label="This is success tooltip">
297
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
298
<path fill="#ffffff" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" />
299
</svg>
300
</a>
301
</p>
302
303
<h3>Size variations</h3>
304
305
<p>
306
<a class="hint--top hint--small" style="border: 1px solid #eee;padding:3px 6px;border-radius:4px;" data-hint="You can show very very long sentences inside tooltips by using various available size variation classes.">
307
Small
308
</a>
309
310
<a class="hint--top hint--medium" style="border: 1px solid #eee;padding:3px 6px;border-radius:4px;" data-hint="You can show very very long sentences inside tooltips by using various available size variation classes.">
311
Medium
312
</a>
313
314
<a class="hint--top hint--large" style="border: 1px solid #eee;padding:3px 6px;border-radius:4px;" data-hint="You can show very very long sentences inside tooltips by using various available size variation classes.">
315
Large
316
</a>
317
</p>
318
319
320
<h3>Extra</h3>
321
322
<p>
323
<a class="hint--left hint--always" aria-label="...which always keep showing">You can also make tooltips...</a>
324
</p>
325
326
<p>
327
<a class="hint--top hint--rounded" aria-label="We have rounded corners for you">Hmm...So you don't like sharp edges?</a>
328
</p>
329
330
<p>
331
<a class="hint--top hint--no-arrow" aria-label="Just the tip!">You can omit the arrow too.</a>
332
</p>
333
334
<h3>Effects</h3>
335
336
<p>
337
<a class="hint--top hint--no-animate" aria-label="Get a simple show/hide tooltip">Dont like animation?</a>
338
</p>
339
<p>
340
<a class="hint--right hint--bounce" aria-label="Bounce">Adding a <code>hint--bounce</code> class gives you that...</a>
341
</p>
342
<p>
343
<a class="hint--left hint--no-shadow" aria-label="Yes, no shadows!">Maybe you do not want shadows.</a>
344
</p>
345
</div>
346
</div>
347
348
<div class="section-inner" style="opacity: 0.7; margin-top: 25px">
349
<strong>Upgrading from v1.x</strong>: If you are already using v1.x, you may need to tweak certain position classes because of the way tooltips are positioned in v2.
350
<br>
351
Its recommended to use <code>aria-label</code> attribute to specify your tooltip text in support of accessibility. Though, you can always use <code>data-hint</code> attribute instead. <a href="https://webaccessibility.withgoogle.com/unit?unit=6&lesson=10">Read more about <code>aria-label</code> here</a>.
352
353
</div>
354
</div>
355
356
<div class="section footer">
357
Made with hands by <a aria-label="@chinchang457" class="hint--top" href="https://twitter.com/chinchang457">Kushagra Gour</a> in India
358
</div>
359
360
</body>
361
</html>