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
| //
// Code JS dérivé de Hot!Ajax Tooltips (http://www.hotajax.org/mootools/tooltips-rating.html)
//
// Ce code va créer dynamiquement la DIV qui servira à l'affichage du tooltip dans le module AllEvents - Calendrier
//
var ToolTip = new Class({
initialize: function (trigger, content_name, options) {
// trigger est le ID de la zone à l'écran sur laquelle le tooltip doit s'afficher. C'est le ID de la cellule du tableau qui affiche
// le numéro du jour
// content_name est un nom. Il s'agit d'un ID unique qui désigne un élément HTML de la page
// exemple : si content_name="content_name"; cela veut dire que dans le code de la page HTML, j'ai quelque chose comme ceci :
// <span id='mod_803_tooltip_DISPLAY_3'>bla bla</span>
// Le type d'élément (span, div, ...) n'a aucune importance.
if (obj=getElementById(content_name)) {
content = obj.innerHTML;
bContinue = true;
} else {
// La DIV associée au tooltip n'existe pas ==> il n'y a rien à afficher
//msg = 'calendrier_tooltip.js - ERROR : HTML ELEMENT WITH ID ['+content_name+'] NOT DEFINED IN YOUR PAGE. REVIEW HOW YOU HAVE BUILT THE DrawTooltips() FUNCTION IN F.I. THE ALLEVENTS MODULE.';
//content = '<div style="text-align:center;background-color:#F5A9A9;color:#DF0101;">'+msg+'</div>';
bContinue = false;
}
this.setOptions({
duration : 300,
transition : Fx.Transitions.linear,
wait : false,
tooltipClass : "se-tooltip",
style : "default",
width : "250",
display : "inline",
mode : "cursor",
sticky : 0
}, options);
if (bContinue==true) {
this.open = false;
this.trigger = getElementById(trigger);
this.tooltip= (new Element("div",
{'class': this.options.tooltipClass,
styles:{position: "absolute", top: 150 + "px", left: 620 + "px", "z-index": 50, visibility: "hidden", width: this.options.width}
})).injectTop(document.body);
this.tooltip_style = (new Element("div", {'class': this.options.style})).injectInside(this.tooltip);
this.tooltip_tl = (new Element("div", {'class': "tooltip-tl", styles: {width: this.options.width}})).injectInside(this.tooltip_style);
this.tooltip_tr = (new Element("div", {'class': "tooltip-tr"})).injectInside(this.tooltip_tl);
this.tooltip_t = (new Element("div", {'class': "tooltip-t", styles: {height: 15}})).injectInside(this.tooltip_tr);
this.tooltip_l = (new Element("div", {'class': "tooltip-l", styles: {width: this.options.width}})).injectAfter(this.tooltip_tl);
this.tooltip_r = (new Element("div", {'class': "tooltip-r"})).injectInside(this.tooltip_l);
this.tooltip_m = (new Element("div", {'class': "tooltip-m"})).injectInside(this.tooltip_r).setHTML(content);
this.tooltip_bl = (new Element("div", {'class': "tooltip-bl", styles: {width: this.options.width}})).injectAfter(this.tooltip_l);
this.tooltip_br = (new Element("div", {'class': "tooltip-br"})).injectInside(this.tooltip_bl);
this.tooltip_b = (new Element("div", {'class': "tooltip-b"})).injectInside(this.tooltip_br);
this.tooltip_arrow = (new Element("div", {'class': "tooltip-arrow", styles: {height: 23}})).injectInside(this.tooltip_b);
if (this.options.sticky) {this.close = (new Element("div", {'class': "tooltip-close"})).injectInside(this.tooltip_tl);}
this.fx = new (Fx.Styles)(this.tooltip, this.options);
this.trigger.addEvent("mouseenter", this.show.bindWithEvent(this));
if (this.options.sticky) {
this.close.addEvent("mouseenter", this.hide.bindWithEvent(this));
} else {
this.trigger.addEvent("mouseleave", this.hide.bindWithEvent(this));
}
} // if (bContinue==true)
},
show: function (event) {
if (!this.open) {
this.pos = this.position(event);
// Left est peut-être négatif lorsque le tooltip s'affiche trop à gauche
if (this.pos.left<0)this.pos.left=0;
this.tooltip.setStyles({opacity: 0, top: this.pos.top + "px", left: this.pos.left + "px"});
this.fx.start({opacity: 1, top: this.pos.top - 10 + "px"});
this.open = true;
/* Ce code vise � remplacer les signes < et > par leurs correspondant HTML. Cette astuce permet d'�viter */
/* des erreurs de compatibilit� W3C. this.tooltip_m.innerHTML �tant le code HTML du tooltip (_m pour message) */
var s=this.tooltip_m.innerHTML;
s=s.replace(/</gi, "<");
s=s.replace(/>/gi, ">");
this.tooltip_m.innerHTML=s;
}
},
hide: function (event) {
if (!(this.pos==undefined)) {
this.fx.start({opacity: 0, top: this.pos.top - 20 + "px"});
}
this.open = false;
},
position: function (event) {
var trg = this.trigger.getCoordinates();
var tip = this.tooltip.getCoordinates();
if (this.options.mode == "cursor") {
var event = new Event(event);
trg = $extend(trg, {top: event.page.y, left: event.page.x, width: 0});
}
return {top: trg.top - tip.height, left: trg.left - tip.width / 2 + trg.width / 2};
}
} // initialize: function (trigger, content, options) {
); // var ToolTip = new Class({
ToolTip.implement(new Options); |
