Raphael JS Tooltip не се показва при първото задържане на мишката

В момента имам карта на арена, създадена с raphael, всеки svg елемент на картата има подсказка, когато задържи курсора. Подсказката не се показва при първото задържане на svg елемент, но ще се покаже, ако потребителят въведе отново svg елемента.

Предполагам, че има нещо общо с моята функция addTip "mouseeneter", но все още съм нов в разбирането на JS, така че не съм сигурен. Ето кода, който използвам за добавяне на подсказка към svg елемента при задържане на мишката, кодът, който използвам, е базиран на това въпрос във форума за stackoverflow и jsfiddle, който създадох връзка

    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'
            });
        });

    }

svg jquery tooltip raphael
person user1431083    schedule 11.06.2012    source източник
comment
Можете ли да изолирате този неправилно работещ фрагмент към jsfiddle?   -  person pp19dd    schedule 11.06.2012
comment
Всъщност имам всичко точно тук   -  person user1431083    schedule 11.06.2012

Отговори (2)


arrow_upward
2
arrow_downward

Чакате да добавите подсказката, докато курсорът на мишката се задейства, просто я добавете преди това,

Преди:

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

След:

 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() {
person Andrew    schedule 11.06.2012
comment
Благодаря за предложението, но това не реши проблема, в конзолата #tip не отговаря, когато преместя този ред. - person user1431083; 11.06.2012
comment
@user1431083 Работи за мен, jsfiddle.net/ArKDp/17, доколкото оригиналът работи така или иначе. - person Andrew; 11.06.2012
comment
А, не забелязах, че сте променили mouseenter/leave на mouseover/out. Сега работи чудесно. Благодаря за вашата помощ! - person user1431083; 11.06.2012
comment
Работи, когато добавя ‹script src=js/jquery.js›‹/script›, но не работи, когато добавя - person shiba; 19.05.2014
comment
Работи, когато добавя ‹script src=js/jquery.js›‹/script›, но не работи, когато добавя jquery/1.9.1/jquery.min.js Защо е така - person shiba; 19.05.2014

arrow_upward
0
arrow_downward

Съгласен съм с Андрю. Подсказката не се „инстанцира“ до първото el.mouseover.

Вероятно това е решението, но ще го разясня с няколко съвета, които могат да помогнат за разрешаването на проблеми като този в бъдеще.

Виждам, че използвате alert('test'). Това ще ви помогне да определите дали кодът е достигнат или не, но всъщност не е толкова добър за определяне на реда на изпълнение (което изглежда е проблемът тук).

Вместо това използвайте един от двата подхода за „отстраняване на грешки“ в JavaScript. Това е много мощен инструмент за изпълнение. Ето как:

  1. Програмно: добавете дебъгера за JS ключова дума; това ще зададе точка на прекъсване и ще спре вашия код по време на изпълнение.

    el.mouseover(function() {debugger; addTip(this.node, tipText); console.log(node); this.toFront(); this.attr({ cursor: 'pointer', fill: '#990000', });

Това може да ви е помогнало да решите проблема си, защото ще видите, че този код се задейства само след първото преместване на мишката.

СЪВЕТ: дебъгерът няма да "спре" в точката на прекъсване, докато в браузъра ви не се отвори стъпков дебъгер. За това препоръчвам Dev Tools в Chrome. Всичко, което трябва да направите, е да щракнете с десния бутон върху страницата и да изберете „Проверете елемента“. Това ще отвори конзола, която дава на бутоните play, step-over, step-in. Това може да е чуждо в началото, но поетапното отстраняване на грешки в JavaScript е най-важният инструмент, който можете да имате, за да станете напреднал JS разработчик. Много е важно. :) Обновете страницата, задръжте курсора на мишката над вашия елемент и трябва да видите, че той спира изпълнението на реда на кода на дебъгера.

"2." Използвайте Dev Tools, за да зададете точка на прекъсване вместо „debugger;“. Това е по-гъвкаво, тъй като точката на прекъсване се задава по време на изпълнение в браузъра и не е вградена физически в кода.

FireBug за Firefox също е много добър. Но това ще отнеме малко разследване от ваша страна.

Постъпковото отстраняване на грешки е добро за вас, опитайте го! Надявам се това да помогне. Всичко най-хубаво! Неш

person Jack Stone    schedule 11.06.2012
comment
благодаря за съвета относно дебъгера; call не знаеше за това. Спря на променливата tipText. Въпреки това в конзолата div#tip не се попълва при задържане, след като го извадя от функцията mouseenter. Грешно ли го пиша? for (var i = 0, len = rsrGroups.length; i ‹ len; i++) { var el = rsrGroups[i]; addTip(el, tipText); el.mouseover(function() { this.toFront(); this.attr({ cursor: 'pointer', fill: '#990000', }); }); - person user1431083; 11.06.2012