balloons.html
5.15 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
<html>
<head>
<title>Balloon tooltip demonstration</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/yahoo-dom-event.js"></script>
<script> var balloon = new Balloon;</script>
<style>
a.tt {
background-color:lightsteelblue;
text-decoration:none;
}
.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>
</head>
<body>
<h1>Balloon tooltip demonstration</h1>
<div style="border:1px solid red;text-align:center;margin-bottom:5px">
Javascript code: <a href="/js/balloon.js" target="_new"
onmouseover="balloon.showTooltip(event,'Get the javascript code!')">
balloon.js</a>
|
Documentation: <a href="http://www.gmod.org/wiki/index.php/Popup_Balloons"
onmouseover="balloon.showTooltip(event,'Documentation for installation and usage')"; target="_new">Wiki</a>
</div>
<div style="border:1px solid blue;background:azure;padding:10px;font-family:arial, sans-serif">
<a href="http://www.gmod.org/wiki/index.php/Popup_Balloons" target="_blank"
onmouseover="balloon.showTooltip(event,'Want to do this with your website? Click for documentation!')">
<img src="/images/sample_balloon.png" style="float:right;border:2px solid black" />
</a>
This page is a demonstration of balloon.js, written by <a href="http://www.gmod.org/wiki/index.php/Popup_Balloons">Sheldon McKay</a>
<ul>
<li>balloon.js is an object-oriented JavaScript class for highly configurable balloon tooltips (AKA popup balloons, bubbles, etc)</li>
<li>the balloon.js package is completely free and open source, so help yourself!</li>
<li>See <a href="http://www.gmod.org/wiki/index.php/Popup_Balloons">www.gmod.org/wiki/index.php/Popup_Balloons</a> for complete documentation</li>
<li>Please feel free to <a href="mailto:mckays@cshl.edu">Contact the Author<a> for help with installation and usage</li>
</ul>
</div>
<p>
Page header with required components
</p>
<pre>
<head>
<title>balloon tooltip demonstration</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/yahoo-dom-event.js"></script>
<script type="text/javascript"> var balloon = new balloon;</script>
</head>
</pre>
<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 <a href="javascript:void(0)" class=tt
onmouseover="balloon.showTooltip(event,'I am a simple message...')">message</a>
<pre>
<a href="javascript:void(0)" onmouseover="balloon.showTooltip(event,'I am a simple message...')">message</a>
</pre>
</p>
<p>
Roll over <a href="javascript:void(0)" class=tt onmouseover="balloon.showTooltip(event,'load:lorem1')">
this text</a> for an example of HTML-formatted text loaded from a hidden <div> element.
<pre>
onmouseover="balloon.showTooltip(event,<b class=y>'load:lorem1'</b>)"
</pre>
<span id=sticky>
Adding a third argument makes the tooltip <a href="javascript:void(0)" class=tt
onmouseover="balloon.showTooltip(event,'load:lorem2',1)">sticky</a>.</span>
<pre>
onmouseover="balloon.showTooltip(event,'load:lorem2',<b class=y>1</b>)"
</pre>
A fourth argument will set the width (Example:<a href="javascript:void(0)" class=tt
onmouseover="balloon.showTooltip(event,'load:lorem2',1,300)">
300px sticky balloon</a>)
<pre>
onmouseover="balloon.showTooltip(event,'load:lorem2',1,<b class=y>300</b>)"
</pre>
</p>
<p>
Here is an example of a tooltip balloon that is populated by an
<a href="javascript:void(0)" class=tt
onmouseover="balloon.showTooltip(event,'<img height=150 src=/images/balloons.png>')">
image</a>.
<pre>
onmouseover="balloon.showTooltip(event,'<img src=/images/balloons.png>')"
</pre>
</p>
<p>
This link will create a sticky balloon whose contents are from a remote URL.
<a href="javascript:void(0)" class=tt
onmouseover="balloon.showTooltip(event,'<iframe style=\'width:270;height:300\' frameborder=0 src=\'http://www.nypost.com/avantgo/avantnews/avantnews.htm\'></iframe>',1,300)">
What's new?</a><br>This requires an embedded iframe.
<pre>
onmouseover="balloon.showTooltip(event,'\
<iframe style=\'width:270;height:300;border:0\' \
src=\'http://www.nypost.com/avantgo/avantnews/avantnews.htm\'></iframe>',1,300)"
</pre>
</p>
</body>