-
Notifications
You must be signed in to change notification settings - Fork 9
/
Demo.html
184 lines (139 loc) · 5.17 KB
/
Demo.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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>FloatingTips demo page</title>
<!-- Include Mootools and FloatingTips -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="Source/FloatingTips.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
// Lets create four simple tips, one for each possible position.
new FloatingTips('#simple a.top'); // Top position is default
new FloatingTips('#simple a.bottom', { position: 'bottom' });
new FloatingTips('#simple a.left' , { position: 'left' });
new FloatingTips('#simple a.right' , { position: 'right' });
// This creates a tip that appear inside the target element
new FloatingTips('#inside a', { position: 'inside', balloon: false, motion: 0 });
// Let's create a customized tip
new FloatingTips('#customized a', {
// Content can also be a function of the target element!
content: function(e) { return 'I\'m a link and I am ' + e.getSize().x + ' px wide! :)'; },
position: 'bottom', // Bottom positioned
center: false, // Place the tip aligned with target
arrowSize: 12 // A bigger arrow!
});
// The following is a tip with HTML content taken from a page element!
new FloatingTips('#advanced a', {
// Content can be a string (an attribute name) or a function.
// If it's a function, it can returns string or HTML elements.
content: function() { return $('htmlcontent'); },
html: true, // I want that content is interpreted as HTML
center: false, // I do not want to center the tooltip
arrowOffset: 16, // Arrow is a little more the the right
offset: { x: -10 } // Position offset {x, y}
});
// A tip that appears when entering data in an input field
new FloatingTips('#focus input', {
content: 'rel',
position: 'right',
showOn: 'focus',
hideOn: 'blur',
distance: 6
});
// Events demo
new FloatingTips('#events a').addEvents({
'show': function(tip, element) {
if (element.get('id') == 'first_event')
document.id('second_event').floatingTipsShow();
},
'hide': function(tip, element) {
if (element.get('id') == 'first_event')
document.id('second_event').floatingTipsHide();
}
});
});
</script>
<style type="text/css">
body {
font-family: sans-serif;
font-size: 13px;
}
div {
margin: 20px 10px;
}
p {
color: #999999;
margin: 0 0 5px;
}
a {
font-weight: bold;
color: #3344FF;
}
a:hover {
font-weight: bold;
color: #6677FF;
}
/* The following is the only rule you need to customize your tip look */
.floating-tip {
background-color: black;
padding: 5px 15px;
color: #dddddd;
font-weight: bold;
font-size: 11px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
</style>
</head>
<body>
<div><h1>FloatingTips demo page</h1></div>
<div id="simple">
<p>Some simple tips. Different position, always centered:</p>
<p>
<a href="#" title="A tooltip." class="top">Default (top)</a> |
<a href="#" title="Another tooltip." class="bottom">Bottom</a> |
<a href="#" title="Again..." class="left">Left</a> |
<a href="#" title="Ok, you got it." class="right">Right</a>
</p>
</div>
<div id="inside">
<p>
You can place it also inside the target element:
<a href="#" title="Et voilà!">Try me</a>
</p>
</div>
<div id="customized">
<p>A customized tip. Not centered, bigger arrow, customized content:</p>
<p><a href="#">What can I say about me?</a></p>
</div>
<div id="advanced">
<p>An advanced <b>(and very cool!)</b> tip. HTML content:</p>
<p><a href="#">Let me see!</a></p>
<!-- This is the tooltip content. Note that is not displayed in the DOM. Inner HTML will be placed as tip content -->
<div id="htmlcontent" style="display: none;">
<p style="overflow: hidden; padding-top: 10px; padding-bottom: 10px; width: 320px; margin: 0;">
<img src="http://i.imgur.com/YRBFe.jpg?1761" style="float: left; margin-right: 10px; width: 64px; height: 64px;">
The Son of Man <i>(Le fils de l'homme)</i> is a 1964 painting
by the Belgian surrealist painter René Magritte.
Magritte painted it as a self-portrait. <i style="color: #666666;">(from Wikipedia, of course)</i>
</p>
</div>
</div>
<div id="focus">
<p>You can show tooltip on focus instead of cursor events:</p>
<p><input type="text" rel="About that field..." value="Edit me"></p>
</div>
<div id="events">
<p>When <a href="#" title="Look right!" id="first_event">this</a> tooltip has been shown, <a href="#" title="Hello!" id="second_event">this</a> tooltip will be shown</p>
</div>
<div>
<p>
Read Javascript comments on this demo or see
<a href="http://wiki.github.com/lorenzos/FloatingTips/docs" target="_blank">docs</a>
for more!
</p>
</div>
</body>
</html>