Raphael JS Tooltip wird beim ersten Hovern nicht angezeigt

Question

Derzeit habe ich eine Arena-Karte mit Raphael erstellt, jedes svg-Element auf der Karte hat einen Tooltip, wenn mit dem Mauszeiger darüber gefahren wird. Der Tooltip wird nicht beim ersten Hovern eines svg-Elements angezeigt, aber er wird angezeigt, wenn der Benutzer das svg-Element erneut betritt.

Ich nehme an, es hat etwas mit meiner Funktion addTip "mouseeneter" zu tun, aber ich bin noch neu im Verständnis von JS, so dass ich nicht sicher bin. Hier ist der Code, den ich für das Hinzufügen der QuickInfo zum svg-Element bei Hover verwende, der Code, den ich verwende, basiert auf diesem Stackoverflow-Forum Frage und das jsfiddle, das ich erstellt habe Link

    var tip = $("#tip").hide();
    var tipText = "Tip the Canoe.";
    var over = false;
    function addTip(node, txt) 
    {
        $(node).mouseenter(function(){
            tipText = txt;
            tip.fadeIn();
            over = true;
        })
       .mouseleave(function(){
            tip.fadeOut();
            over = false;
        });
    }

    for (var i = 0, len = rsrGroups.length; i < len; i++) {
        var el = rsrGroups[i];
        el.mouseover(function() {
            addTip(this.node, tipText);
            console.log(node);
            this.toFront();
            this.attr({
                cursor: 'pointer',
                fill: '#990000',
            });
            //alert('test');
        });

        el.mousemove(function(e){
            if (over){
                tip.css("left", e.clientX+20).css("top", e.clientY+20);
                tip.text(tipText);
            }
        });
        el.mouseout(function() {
            this.attr({
                fill: '#003366'
            });
        });
        el.click(function() {
            this.attr({
                fill: 'green'
            });
        });

    }

Answer 1

Sie warten mit dem Hinzufügen der QuickInfo, bis der Mouseover ausgelöst wird, fügen Sie sie einfach vorher hinzu,

Vorher:

 for (var i = 0, len = rsrGroups.length; i < len; i++) {
    var el = rsrGroups[i];
    el.mouseover(function() {
        addTip(this.node, tipText);

Danach:

 function addTip(node, txt) {
    node.mouseover(function(){
        tipText = txt;
        tip.fadeIn();
        over = true;
        }).mouseout(function(){
        tip.fadeOut();
        over = false;
    });
}

 for (var i = 0, len = rsrGroups.length; i < len; i++) {
    var el = rsrGroups[i];
    addTip(el, tipText);
    el.mouseover(function() {

Answer 2

Ich stimme mit Andrew überein. Der Tooltip wird erst beim ersten el.mouseover "instanziiert".

Das ist wahrscheinlich die Lösung, aber ich werde noch ein paar Tipps geben, die helfen können, solche Probleme in Zukunft zu lösen.

Wie ich sehe, verwenden Sie alert('test'). Damit können Sie feststellen, ob der Code erreicht wird oder nicht, aber es ist nicht wirklich gut, um die Reihenfolge der Ausführung zu bestimmen (was hier das Problem zu sein scheint).

Verwenden Sie stattdessen einen von zwei Ansätzen zum "Debuggen" von JavaScript. Es ist ein sehr leistungsfähiges Werkzeug zur Laufzeit. So geht's:

1. Programmatisch: Fügen Sie das JS-Schlüsselwort debugger hinzu; dadurch wird ein Haltepunkt gesetzt und Ihr Code während der Ausführung angehalten.

   el.mouseover(function() { Debugger; addTip(this.node, tipText); console.log(node); [ ] this.attr({ Zeiger: [ ] [ ] });

Diese Mai hätte Ihnen geholfen, Ihr Problem zu lösen, denn Sie würden sehen, dass dieser Code nur ausgelöst wird nach dem ersten Mouseover.

TIPP: Der Debugger hält erst dann am Haltepunkt an, wenn ein Step-Debugger in Ihrem Browser geöffnet ist. Hierfür empfehle ich Dev Tools in Chrome. Klicken Sie einfach mit der rechten Maustaste auf die Seite und wählen Sie "Inspect Element". Daraufhin öffnet sich eine Konsole mit den Schaltflächen play, step-over, step-into. Das mag zunächst ungewohnt sein, aber das Step-Debugging von JavaScript ist das wichtigste Werkzeug, das Sie haben können, um ein fortgeschrittener JS-Entwickler zu werden. Es ist sehr wichtig. :) Aktualisieren Sie die Seite, fahren Sie mit der Maus über Ihr Element, und Sie sollten sehen, dass die Ausführung an der Codezeile des Debuggers gestoppt wird.

"2." Verwenden Sie Dev Tools, um einen Haltepunkt zu setzen, anstatt 'debugger;'. Dies ist flexibler, da der Haltepunkt zur Laufzeit im Browser gesetzt wird und nicht physisch in den Code eingebettet ist.

FireBug für Firefox ist auch sehr gut. Aber das wird ein wenig Recherche Ihrerseits erfordern.

Step-Debugging ist gut für Sie, probieren Sie es aus! Ich hoffe, das hilft. Alles Gute für Sie! Nash