balloons.html
9.63 KB
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
<html>
<head>
<title>Balloon Tooltips</title>
<script type="text/javascript" src="js/balloon.config.js"></script>
<script type="text/javascript" src="js/balloon.js"></script>
<script type="text/javascript" src="js/box.js"></script>
<script type="text/javascript" src="js/yahoo-dom-event.js"></script>
<!-- Note: This CSS is specific to this page -- it is not required for balloon tooltips to work -->
<style>
.tt {
background-color:lightsteelblue;
color:blue;
text-decoration:none;
cursor:pointer;
}
.hidden {
display:none;
}
pre {
background-color:gainsboro;
padding:10px;
margin-left:20px;
margin-right:20px;
font-family:courier;
font-size:90%;
}
b.y { background-color:yellow }
</style>
<script type="text/javascript">
// white balloon with default configuration
var balloon = new Balloon;
BalloonConfig(balloon,'GBubble');
// plain balloon tooltip
var tooltip = new Balloon;
BalloonConfig(tooltip,'GPlain');
// fading balloon
var fader = new Balloon;
BalloonConfig(fader,'GFade');
// a plainer popup box
var box = new Box;
BalloonConfig(box,'GBox');
// a box that fades in/out
var fadeBox = new Box;
BalloonConfig(fadeBox,'GBox');
fadeBox.bgColor = 'black';
fadeBox.fontColor = 'white';
fadeBox.borderStyle = 'none';
fadeBox.delayTime = 200;
fadeBox.allowFade = true;
fadeBox.fadeIn = 750;
fadeBox.fadeOut = 200;
</script>
</head>
<body>
<div style="border:1px solid blue;background:ivory;padding:10px;font-family:arial, sans-serif">
<img style="float:right" src="images/sample.png" width=300>
</span>
<span id="sheldon" style="display:none">
<center>
<img src="images/sheldon.jpg">
<br>mckays@cshl.edu
</center>
</span>
<br>
<ul>
<li>This page is a demonstration of <a href="http://www.gmod.org/wiki/index.php/Popup_Balloons">balloon.js</a>.</li>
<li>Contact <a href="mailto:mckays@cshl.edu">the author</a> for help.</li>
</ul>
<p>
The balloon.js package is written in object-oriented JavaScript and allows you to add configurable balloon tooltips
(AKA popup balloons, bubbles, rollover tooltips etc., etc.) to your website. It is generic and is portable to most web sites.
<p>
The balloons are dynamically sized in both the vertical and horizontal dimensions and the left/right/up/down orientation
is calculated automatically based on the position of the cursor. Balloon contents can be provided locally in your own HTML or remotely via AJAX.
This package is open source and free to all as long as the copyright notice is retained. See below for demonstrations and documentation.
</p>
<hr>
<h1 style="align:left">Demo:</h1>
<div style="border:1px solid black;width:90%;margin:auto">
<table cellpadding=3 style="width:100%">
<tr>
<th width=10% align=left rowspan=2>Demonstration:</th>
<th width=30% class="tt" style="border:1px solid black"
onmouseover="balloon.showTooltip(event,'This is a balloon tooltip. \
It will vanish if you leave this box',0,250)">mouse over this box</th>
<th width=30% class="tt">
<span onmouseover="balloon.showTooltip(event,'Your are hovering, I said click me!')"
onclick="balloon.showTooltip(event,'Your sticky message goes here.',1)">click me</span>
</th>
<th width=30% class="tt"><span onmouseover="tooltip.showTooltip(event,'This is a plain balloon.<br>Your message goes here!')">plainer balloon</span></th>
</tr>
<tr>
<th class="tt"><span onmouseover="fader.showTooltip(event,'Your message goes here!')">fading balloon</span></th>
<th class="tt"><span onmouseover="fadeBox.showTooltip(event,'Your message goes here!')">fading box</span></th>
<th class="tt"><span onmouseover="box.showTooltip(event,'Your sticky message goes here!<br><a href=\'http://www.google.com\'>Your link goes here...</span>',1,275)">
sticky box</span></th>
</tr>
<tr>
<th align=left>Documentation:</th>
<th colspan=3 align=left class=tt>
<a class=tt href="http://gmod.org/wiki/Popup_Balloons"
onmouseover="balloon.showTooltip(event,'Click this link to go to documentation on the GMOD Wiki')"
onmouseout="alert('Read the docs, when you get a chance...')">
http://gmod.org/wiki/Popup_Balloons
</th>
</tr>
<tr>
<th align=left>Download:</th>
<th class=tt colspan=3 align=left>
<a class=tt href="http://mckay.cshl.edu/downloads/balloons.tar.gz"
onmouseover="box.showTooltip(event,'Click to download the whole package, with all required scripts, images, etc',0,300)">
balloons.tar.gz</a>
<font color="black">
or for windows users...
</font>
<a class=tt href="http://mckay.cshl.edu/downloads/balloons.zip"
onmouseover="box.showTooltip(event,'Click to download the whole package. Try this if your unzip program complains that the tar.gz file is corrupted')">
balloons.zip
</a>
</th>
</tr>
</table>
</div>
</div>
<br>
<!-- These hidden elements contain balloon contents -->
<div id="lorem1" class="hidden">
Lorem ipsum dolor sit amet, <b><i>consectetuer adipiscing elit</b></i>. Vestibulum iaculis,
ligula quis fringilla volutpat, metus mi molestie lorem, <span style="color:red">quis accumsan pede
turpis nec metus.</span> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.'
</div>
<div id="lorem2" class="hidden">
<a href="http://www.lipsum.com" target="_new" style="color:blue">What is <i>Lorem ipsum...</i>?</a>
Lorem ipsum dolor sit amet, <b><i>consectetuer adipiscing elit</b></i>. Vestibulum iaculis
, ligula quis fringilla volutpat, metus mi molestie lorem, quis accumsan pede
turpis nec metus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
<p>
This is an example of a simple balloon <span class=tt onmouseover="balloon.showTooltip(event,'I am a simple message...')">message</span>
<pre>
<span onmouseover="<b class=y>balloon</b>.showTooltip(event,'I am a simple message...')">message</span>
</pre>
This is an example of the same message with a different balloon <span class=tt
onmouseover="tooltip.showTooltip(event,'I am a simple message...')">style</span>
<pre>
onmouseover="<b class=y>tooltip</b>.showTooltip(event,'I am a simple message...')">message</span>
</pre>
This is an example of the same message with a box <span class=tt
onmouseover="box.showTooltip(event,'I am a simple message...')">style</span>
<pre>
onmouseover="<b class=y>box</b>.showTooltip(event,'I am a simple message...')">message</span>
</pre>
</p>
<p>
Roll over <span class=tt onmouseover="balloon.showTooltip(event,'load:lorem1')">
this text</span> for an example of HTML-formatted text loaded from a hidden <div> element.
<pre>
onmouseover="balloon.showTooltip(event,<b class=y>'load:lorem1'</b>)"
...
<div id="lorem1" style="display:none">
Lorem ipsum dolor sit amet, <b><i>consectetuer adipiscing elit</b></i>. Vestibulum iaculis,
ligula quis fringilla volutpat, metus mi molestie lorem, <span style="color:red">quis accumsan pede
turpis nec metus.</span> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.'
</div>
</pre>
<span id=sticky>
Adding a third argument makes the tooltip <span class=tt
onmouseover="balloon.showTooltip(event,'load:lorem2',1)">sticky</span>.</span>
<pre>
onmouseover="balloon.showTooltip(event,'load:lorem2',<b class=y>1</b>)"
</pre>
A fourth argument will set the width (Example:<span class=tt
onmouseover="balloon.showTooltip(event,'load:lorem2',1,300)">
300px sticky balloon</span>)
Try a <span class=tt
onmouseover="tooltip.showTooltip(event,'load:lorem2',1,300)">plain version</span>
<pre>
onmouseover="balloon.showTooltip(event,'load:lorem2',1,<b class=y>300</b>)"
</pre>
Now let's try that with a <span class=tt
onmouseover="box.showTooltip(event,'load:lorem2',1,300)">
sticky box</span>.
<pre>
onmouseover="box.showTooltip(event,'load:lorem2',1,<b class=y>300</b>)"
</pre>
The height can also be specified with a fifth argument (Example:<span class=tt
onmouseover="balloon.showTooltip(event,'load:lorem2',1,250,250)">
250px x 250px sticky balloon</span>)
<pre>
onmouseover="balloon.showTooltip(event,'load:lorem2',1,<b class=y>250</b>,<b class=y>250</b>)"
</pre>
If the balloon contents are too large for the specified dimensions, you will <span class=tt
onmouseover="balloon.showTooltip(event,'load:lorem2',1,150,150)">scrollbars for sticky balloons</span>
and <span class=tt onmouseover="balloon.showTooltip(event,'load:lorem2',0,150,150)">clipping for non-sticky balloons</span>.
<pre>
onmouseover="balloon.showTooltip(event,'load:lorem2',1,<b class=y>150</b>,<b class=y>150</b>)"
</pre>
</p>
<p>
Here is an example of a tooltip balloon that is populated by an
<span class=tt
onmouseover="balloon.showTooltip(event,'<img height=150 src=\'images/balloons.png\' />')">
image</span>.
<pre>
onmouseover="balloon.showTooltip(event,'<img height=150 src=\'images/balloons.png\' />')"
</pre>
</p>
<img src="images/balloons.png" onmouseover="balloon.showTooltip(event,'my message')" />
<p>
This creates a sticky balloon whose contents are from an external website.
<span class=tt
onmouseover="balloon.showTooltip(event,'<iframe style=\'width:300;height:290\' frameborder=0 src=\'http://m.nypost.com\'></iframe>',1)">
What's new at the NY Post?</span><br>
<b>Note: </b> This requires an embedded iframe because it is an external website.
<pre>
<span onmouseover="balloon.showTooltip(event,'<iframe style=\'width:300;height:290\' frameborder=0 src=\'http://m.nypost.com\'></iframe>',1)">
What's new at the NY Post?</span>
</pre>
<br>
Ajax methods are <a href="http://gmod.org/wiki/Popup_Balloons#Using_AJAX_to_get_balloon_contents">also available</a>.
</p>
</body>
</html>