/
tooltips.html
85 lines (73 loc) · 3.6 KB
/
tooltips.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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Raphael Tooltips</title>
<script src="../raphael-min.js" type="text/javascript"></script>
<script src="../g.raphael.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function () {
var r = Raphael("holder", 2000, 2000),
s = r.set(),
t = r.set(),
u = r.set(),
v = r.set();
function ref(count, y) {
var def = ["M30,", y, "l", 50 * count, ",0"],
end = "," + (y - 20) + "l0,40";
for (var i = 1; i <= count; i++) {
def.push("M", 50 * i, end);
}
r.path(def.join('')).attr({ stroke: '#c00', translation: [150.5, 100.5] }).insertBefore(s[0]);
}
s.push(
r.tag(50, 150, "$9.99", 130),
r.tag(100, 150, "$9.99", 310),
r.label(150, 150, "$9.99"),
r.flag(200, 150, "$9.99", 60),
r.flag(250, 150, "$9.99", 240),
r.popup(300, 150, "$9.99", 'down', 20),
r.popup(350, 150, "$9.99", 'right'),
r.drop(400, 150, "$10", 60),
r.rect(450, 150, 15, 15).attr({fill:'90-#fff-#000'}).drop(),
r.blob(500, 150, "$9.99", 60),
r.blob(550, 150, "$9.99", 270),
r.circle(600, 150, 10).attr({fill:'#ff0000'}).label(),
r.circle(650, 150, 10).attr({fill:'#ff0000'}).popup(),
r.circle(700, 150, 10).attr({fill:'#ff0000'}).popup('down'),
r.circle(800, 150, 10).attr({fill:'#ff0000'}).tag(130, null, 750),
r.circle(800, 150, 10).attr({fill:'#ff0000'}).tag(),
r.circle(900, 150, 10).attr({fill:'#ff0000'}).blob(),
r.circle(800, 150, 10).attr({fill:'#ff0000'}).blob(270, 850)
);
for (var i = 0; i < 30; i++) {
//t.push(r.text(800, 350, "$9.99").attr({fill:'#ff0000'}).tag(360 / 30 * i, 50 * (i + 1)));
//t.push(r.circle(800, 350, 10).attr({fill:'90-#fff-#000'}).tag(360 / 30 * i, 5, 50 * (i + 1)));
t.push(r.rect(800, 350, 20, 20).attr({fill:'90-#ff0000-#0000ff'}).flag(360 / 30 * i, 50 * (i + 1)));
}
ref(t.length, 350);
//test on sets
u.push(
r.circle(100, 850, 10).attr({fill: '#00ff00'}),
r.circle(110, 800, 10).attr({fill: '#0000ff'})
).flag(130);
var a = r.set();
a.push(
r.circle(200, 850, 10).attr({fill: '#00ff00'}),
r.circle(210, 800, 10).attr({fill: '#0000ff'})
).flag(30);
ref(s.length, 150);
var v = r.set();
for (var i = 0; i < 30; i++) {
//v.push(r.circle(0, 0, 10).attr({fill:'90-#fff-#000'}).blob(360 / 30 * i, 50 * (i + 1), 550));
v.push(r.rect(0, 0, 20, 20).attr({fill:'90-#fff-#000'}).blob(360 / 30 * i, 50 * (i + 1), 550));
//v.push(r.text(0, 0, 'Hello').attr({fill:'90-#fff-#000'}).blob(360 / 30 * i, 50 * (i + 1), 550));
}
ref(v.length, 550);
};
</script>
</head>
<body class="raphael">
<div id="holder"></div>
</body>
</html>