-
Notifications
You must be signed in to change notification settings - Fork 450
/
test.html
89 lines (79 loc) · 3.99 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- <link rel="stylesheet" href="https://unpkg.com/balloon-css@0.5.1/balloon.min.css"> -->
<link rel="stylesheet" href="balloon.min.css">
<style>
body {
margin: 200px;
}
section {
background: #efefef;
margin-top: 50px;
padding: 20px;
border-radius: 10px;
max-width: 700px;
margin: 50px auto 0;
}
button {
display: block;
margin: 50px 0;
}
.tooltip-red {
--balloon-color: red;
}
.tooltip-big-text {
--balloon-font-size: 20px;
}
.tooltip-slide {
--balloon-move: 30px;
}
</style>
</head>
<body>
<section>
<h1>Positioning</h1>
<button aria-label="Whats up!" data-balloon-pos="up">Hover me!</button>
<button aria-label="Whats up!" data-balloon-pos="left">Hover me!</button>
<button aria-label="Whats up!" data-balloon-pos="right">Hover me!</button>
<button aria-label="Whats up!" data-balloon-pos="down">Hover me!</button>
<hr>
<button aria-label="Whats up!" data-balloon-pos="up-left">Hover me!</button>
<button aria-label="Whats up!" data-balloon-pos="up-right">Hover me!</button>
<button aria-label="Whats up!" data-balloon-pos="down-left">Hover me!</button>
<button aria-label="Whats up!" data-balloon-pos="down-right">Hover me!</button>
</section>
<section>
<h1>Length</h1>
<button data-balloon-length="small" aria-label="Hi." data-balloon-pos="up">Hover me!</button>
<button data-balloon-length="medium" aria-label="Now that's a super big text we have over here right? Lorem ipsum dolor sit I'm done." data-balloon-pos="up">I'm a medium tooltip.</button>
<button data-balloon-length="large" aria-label="What about something really big? This may surpass your window dimensions. Imagine you're on that boring class with that boring teacher and you didn't slept so well last night. Suddenly you're sleeping in class. Can you believe it?!" data-balloon-pos="up">I'm a large tooltip</button>
<button data-balloon-length="xlarge" aria-label="What about something really big? This may surpass your window dimensions. Imagine you're on that boring class with that boring teacher and you didn't slept so well last night. Suddenly you're sleeping in class. Can you believe it?!" data-balloon-pos="up">I'm a Xlarge tooltip</button>
<button data-balloon-length="fit" aria-label="What about something really big? This may surpass your window dimensions. Imagine you're on that boring class with that boring teacher and you didn't slept so well last night. Suddenly you're sleeping in class. Can you believe it?!" data-balloon-pos="up">My width will fit to element</button>
</section>
<section>
<h1>Disabling animation</h1>
<button data-balloon-blunt aria-label="No animation!" data-balloon-pos="up">No animation!</button>
</section>
<section>
<h1>Showing tooltips programatically</h1>
<button data-balloon-visible aria-label="I am always visible!" data-balloon-pos="down">Always visible!</button>
</section>
<section>
<h1>Customizing Tooltips</h1>
<button aria-label="I am red!" data-balloon-pos="up" class="tooltip-red">I am red!</button>
<button aria-label="I have big text!" data-balloon-pos="up" class="tooltip-big-text">I have big text!</button>
<button aria-label="I move a lot!" data-balloon-pos="up" class="tooltip-slide">I move a lot!</button>
</section>
<section>
<h1>Glyphs and Icon Fonts</h1>
<button aria-label="HTML special characters: ☻ ✂ ♜" data-balloon-pos="up">Hover me!</button>
<button aria-label="Emojis: 😀 😬 😁 😂 😃 😄 😅 😆" data-balloon-pos="up">Hover me!</button>
<button class="font-awesome" aria-label="Font Awesome:     " data-balloon-pos="up">Hover me!</button>
</section>
</body>
</html>