Firefox: tooltip non affiché

Version imprimable

09/02/2010, 23h31
dgrichard

Firefox: tooltip non affiché
Je génère dans mon application des DIV en utilisant document.createElement() et j'y affecte un title et l'insère dans le DOM.
Code:

1 2 3 4 var d= document.createElement('div'); d.title= 'TOOLTIP'; ...
Ce genre de code est généré après l'évènement DOMContentLoaded.

Au final: le passage de la souris sur la div (qui a une largeur, hauteur, etc ...) ne provoque pas l'affichage de TOOLTIP.

Si j'"Enregistre sous" ma page et la recharge avec Fifefox (Ouvrir fichier), les tooltips fonctionnent !

Les tooltips fonctionnent aussi sous IE6/8, Opera 10, Safari 4, Chrome 3.

Un exemple d'une telle page est là (les tooltips sont sensés s'afficher sur les icônes en haut à droite, sur les noms des couches à gauche. Il s'affiche uniquement sur l'hyperlien en bas (Conditions générales d'utilisation) !

J'ai aussi essayé ceci:
Code:

1 2 3 4 var d= document.createElement('div'); d.setAttribute('title', 'TOOLTIP'); ...
sans plus de succès.

J'ai pas cherché à utiliser innerHTML (sur le parentNode de la DIV par exemple) dans le code (bien que plus rapide au chargement). Les changements seraient conséquents et surtout en collisition avec certains composants que j'utilise avec la bibliothèque OpenLayers.

Aucune piste non plus en cherchant sur le web ...

Une idée ?

Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <script type="text/javascript"> function foo(){ d=document.createElement('div') d.title="coucou" d.innerHTML= 'ici' document.body.appendChild(d) } </script> </head> <body onload="foo()"> </body>
Testé sous IE 5.5, IE 6, IE 7, IE 8, FireFox, Opera, Lunascape, Chrome
Le tooltip s'affiche...

testé aussi avec height et width et sans contenu ... le tooltip s'affiche

10/02/2010, 12h39
dgrichard

Certes, ...

Je sais que ce code fonctionne, l'objet de ma question, c'est dans quels cas (connus?), il peut ne pas fonctionner ...

Dans mon cas, le code est plus « complexe » car le noeud DOM DIV peut être retiré du parentNode, puis remis dans un nouveau, voire être recréé selon les actions effectuées ...

As-tu constaté que sur l'exemple donné, les tooltips n'apparaissaient pas (... sous FF2/FF3/FF3.5) ?
10/02/2010, 12h54
SpaceFrog

Désolé je n'ai pas compris ta problématique ...

Citation:

dans mon application

quelle est l'application ? quel est le browser ?

la seule explication que j'y verrais serait un souci de charset de ton appli par rapport à celui de la page
10/02/2010, 13h18
dgrichard
Citation:

Envoyé par SpaceFrog

quelle est l'application ? quel est le browser ?

Celle pointée là (Cf. post initial).
FF 2.0/FF3.0/FF3.5 même combat. Les autres fonctionnent :calim2:

Citation:

Envoyé par SpaceFrog

la seule explication que j'y verrais serait un souci de charset de ton appli par rapport à celui de la page

Loupé, il y en a un qui fonctionne (pas sur une DIV, mais sur un hyperlien A)...
De plus, le charset (balise META) est indiqué dans la page et tout le code JS est en UTF-8 :
Code:

1 2 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
10/02/2010, 13h19
vermine

Bonjour,

Si je puis me permettre une bête remarque, j'ajoute que si il n'y a rien dans le <div></div>, donc pas même un  , certaines méthodes, certains attributs n'ont pas l'air de fonctionner. Ce n'est peut-être jamais votre cas, je n'en sais rien.
10/02/2010, 13h29
SpaceFrog

le charset ne depend pas que de la balise meta ...
tu peux avoir un charset du fichier different , un header serveur different ...
10/02/2010, 13h54
dgrichard

Citation:

Envoyé par vermine

Si je puis me permettre une bête remarque, j'ajoute que si il n'y a rien dans le <div></div>, donc pas même un  , certaines méthodes, certains attributs n'ont pas l'air de fonctionner. Ce n'est peut-être jamais votre cas, je n'en sais rien.

Ce n'est pas le problème : que je rajoute ou pas un caractère, les tooltips ne s'affichent pas sous FF ...
10/02/2010, 13h57
dgrichard

Citation:

Envoyé par SpaceFrog

le charset ne depend pas que de la balise meta ...
tu peux avoir un charset du fichier different , un header serveur different ...

Exact, mais en local, mon apache retourne du UTF-8 aussi ...

Sur Free, l'en-tête de requête est ISO8859-1 et UTF-8, je ne vois rien en réponse.
10/02/2010, 14h03
SpaceFrog

J'ai raté l'étape de qui génère ???
quand tu dis créé dynamiquement ?? par js dans le browser ?
je ne saisis pas la différence avec mon premier code ?
je genère un div je lui colle un title , ça marche
10/02/2010, 21h06
dgrichard

Citation:

Envoyé par SpaceFrog

quand tu dis créé dynamiquement ?? par js dans le browser ?

Oui (la page est du pur HTML), sur l'évènement DOMContentLoaded, la méthode initGeoportalMap() est appelée ; c'est durant l'exécution de cette méthode que les DIV sont dynamiquement créées ...

Citation:

Envoyé par SpaceFrog

je ne saisis pas la différence avec mon premier code ?
je genère un div je lui colle un title , ça marche

Bienvenue au club :mouarf:, c'est bien celà mon challenge :mrgreen: : comprendre pourquoi un comportement illogique survient !

Sous Firebug j'ai bien constaté que le survol à la souris des DIV qui n'émettent pas de tooltip provoque bien la levée de l'évènement mouveover :calim2: qui me semble pourtant donc bien "lié" à l'affichage de la tooltip pourtant...
11/02/2010, 12h38
SpaceFrog

on peut voir un peu plus de initGeoportalMap() ?
enfin de la routind de creation puis d'append de l'element ?

Citation:

Envoyé par SpaceFrog

on peut voir un peu plus de initGeoportalMap() ?

« Code source de la page » sur l'exemple :ccool:

Citation:

Envoyé par SpaceFrog

enfin de la routind de creation puis d'append de l'element ?

C'est plus complexe, ci-dessous les méthodes Javascript qui participent à la création/mises à jour des éléments DOM que j'ai extraites du code des bibilothéques utilisées:

Création de contrôleur associé à une DIV :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
    OpenLayers.Control.prototype.draw= function (px) {
        if (this.div == null) {
            this.div = OpenLayers.Util.createDiv(this.id);//appelle document.createElement('div');
            this.div.className = this.displayClass;
            if (!this.allowSelection) {
                this.div.className += " olControlNoSelect";
            }
            if (this.title != "") {
                if (this.div && !this.panel_div) {
                    this.div.title= OpenLayers.i18n(this.title);
                } else if (this.panel_div) {
                    this.panel_div.title= OpenLayers.i18n(this.title);
                }
            }
        }
        /* utilisation du px ... retiré pour simplifier le code */
        return this.div;
    };

Panneau composé de contrôleurs :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
    OpenLayers.Control.Panel.prototype.addPanelDiv= function (cntrl) {
        var element= document.createElement("div");
        if (cntrl.panel_div) {
            cntrl.panel_div.parentNode.removeChild(cntrl.panel_div);
            cntrl.panel_div= null;
        }
        cntrl.panel_div= element;
        if (cntrl.title != "") {
            cntrl.panel_div.title= OpenLayers.i18n(cntrl.title);
        }
        OpenLayers.Event.observe(
            cntrl.panel_div,
            "click",
            OpenLayers.Function.bind(this.onClick, this, cntrl)
        );
        OpenLayers.Event.observe(
            cntrl.panel_div,
            "mousedown",
            OpenLayers.Function.bindAsEventListener(OpenLayers.Event.stop)
        );
    };

Mise à jour du panneau :

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
 
    Geoportal.Control.Panel.prototype.redraw= function() {
        // it is supposed that each inner control is a div within the
        // panel div. Instead of clearing the panel div, we push
        // forth/back inner controls panel_div ...
        // the div order should be the same as inner controls.
        if (this.active) {
            for (var i= 0, len= this.controls.length; i<len; i++) {
                var cntrl= this.controls[i];
                if (!cntrl.panel_div) {
                    // panel_div already moved to panel div, get it back :
                    if (this.div.childNodes.length>0) {
                        cntrl.panel_div= this.div.removeChild(this.div.childNodes[0]);
                    } else {
                        cntrl.panel_div= null;
                    }
                }
                var element= cntrl.panel_div;
                if (element!=null) {
                    if (cntrl.active) {
                        element.className= cntrl.displayClass + "ItemActive";
                    } else {
                        element.className= cntrl.displayClass + "ItemInactive";
                    }
                    // IE fix :
                    if (element.parentNode) {
                        element= element.parentNode.removeChild(element);
                    }
                    // panel_div push forth to panel div :
                    this.div.appendChild(element);
                }
                // panel_div reinitialised :
                cntrl.panel_div= null;
            }
            this.div.style.display= 'block';//ensure visible
        }
    };

27/03/2010, 19h20
dgrichard

Trouvé !

Sous FF, il faut absolument que les containers de la div (ainsi que la div en question) n'intercepte pas l'évènement mousemove !

Cf. cette discussion qui montre comment empêcher l'apparition d'un tooltip - cela ne fonctionne que sous FF :ccool: