Positionner une infobulle

[lacja75]

Bonjour à toutes et à tous,

Je suis un petit nouveau et j'aimerais savoir si l'on pouvait m'aider pour un problème dont je ne sais même pas s'il est solvable ...
En effet, je ne connais absolument rien en javascript, j'ai seulement quelques notions de sa logique (en revanche, je m'y connais un peu plus en html, css, php).

Donc mon soucis est que j'aimerais, sur mon site joomla, bidouiller un module (allevents) pour qu'un évènement js puisse se trouver à un endroit précis sur ma page (donc pas en absolute) ...
En gros, c'est un module pour faire un calendrier, et j'aimerais que lorsque l'on passe avec la souris sur une date avec un évènement (contenu) créé, on voit apparaître la "tooltip" du module à un endroit précis de ma page (du genre à 10px left de ma div "menu" ), et ne pas utiliser :

top: event.page.y, left: event.page.x

pour positionner la "boîte" dans l'espace.

Voici le code javascript de l'évènement "apparition+positionnement de la tooltip" :

Code :

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 &#65533; remplacer les signes &lt; et &gt; par leurs correspondant HTML.   Cette astuce permet d'&#65533;viter */
         /* des erreurs de compatibilit&#65533; W3C.   this.tooltip_m.innerHTML &#65533;tant le code HTML du tooltip (_m pour message)  */
 
         var s=this.tooltip_m.innerHTML;
         s=s.replace(/&lt;/gi, "<");
         s=s.replace(/&gt;/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);

Bref bref bref

J'attends vos réponses avec impatience !

En espérant que vous puissiez m'aider !

Merci d'avance pour vos réponses

lacja

[Willpower]

Bonjour,

Envoyé par lacja75

et ne pas utiliser :

Code :

top: event.page.y, left: event.page.x

Y a-t'il une raison à ne pas vouloir utiliser event.page ?

[lacja75]

Bonjour !

non, enfin je ne sais pas ... J'aimerais juste que l'event n'apparaisse pas au dessus de ma souris, mais plutôt à un endroit bien définis. D'où le problème pour le event.page non ?
Est-ce possible ?

[Willpower]

ah ok, je n'avais pas bien compris la question.

Code :

1
2
3
4
  show: function (event) {
 
      if (!this.open) {    	  
         this.pos = this.position(event);

--->

Code :

1
2
3
4
  show: function (event) {
 
      if (!this.open) {    	  
         this.pos = {left:40,top:40};

[lacja75]

Merci pour la réponse !

C'est exactement dans cette direction que je voudrais partir !
Maintenant, il ne me reste plus qu'à dire à l'événement, qu'il s'affiche dans une div déjà existante ... est-ce possible ?