Функция зависания Javascript появится

Question

Я знаю, как сделать поле появляться, когда вы наведите указатель мыши на круг, однако он большой, и это портит мой опыт. Это предупреждение. Я бы предпочел, чтобы это была меньшая коробка, которая просто появляется над кругом, когда вы навешиваете, а не огромную, если вы понимаете, что я имею в виду. Однако я не уверен, как это сделать. Любая помощь будет большим

Knockout JS 2.0.0

window.onload = function() { 
    var paper = new Raphael(0, 0, 400, 400); 
    var backGround = paper.rect(0, 0, 400, 400); 
    backGround.attr({ 
    fill: "orange" 
    }); 
    var face = paper.circle(200, 200, 100); 
    face.attr({ 
    fill: "Red" 
    }); 
    face.hover(hoverHandler); 
}; 

function hoverHandler() { 
    alert("hi"); 
} 

Итак, еще раз, когда пользователь наводит курсор на красный круг я хочу небольшой ящик, чтобы появиться над ним и сказать привет там

Благодаря

Edit: JSFiddle

Answer 1

То, что вы хотите, вы должны вызвать функцию (например, анонимные) и проход к нему ваш бар для изменения его свойств. Затем на мышке hover панель появляется над кругом.

window.onload = function() { 
    var paper = new Raphael(0, 0, 400, 400); 
    var face = paper.circle(200, 200, 100); 
    face.attr({ 
    fill: "Red" 
    }); 
    var backGround = paper.rect(150, 150, 100, 100); 
    backGround.attr({ 
    fill: "", 
    "stroke-width": 0 
    }); 
    face.hover(function(){hoverHandler(backGround)}); 
}; 

function hoverHandler(l) { 
    alert("hi"); 
    l.attr({ 
    fill: "orange" 
    }); 
} 

http://jsfiddle.net/fkL0ug3h/

Answer 2

Y вы, возможно, придется возиться с тем, где вы хотите разместить свои элементы, но это должно заставить вас идти в правильном направлении. Основная проблема, с которой вы, вероятно, столкнулись, заключалась в том, что ваш звонок был вне вызова функции загрузки, поэтому, если вы попытаетесь передать свой бумажный объект в свою функцию обратного вызова, он вернется не определен.

Вот еще один хороший answer при добавлении текста с использованием Рафаэля.

Живой пример: http://codepen.io/larryjoelane/pen/LGKxeR

Рафаэль/JavaScript код:

 window.onload = function() { 

    var paper = new Raphael(0, 0, 400, 400); 

    var backGround = paper.rect(0, 0, 400, 400); 

    backGround.attr({ 
    fill: "orange" 
    }); 
    var face = paper.circle(200, 200, 100); 
    face.attr({ 
    fill: "Red" 
    }); 

    face.hover(hoverHandler); 


    //Moved this inside of the onload event 
    function hoverHandler() { 

    //create the alert 
    var alert = paper.rect(175, 175, 50, 50); 

    alert.attr({ 

     fill: "blue" 

    }); 

    //add the text 

    var text = paper.text(200, 200, "Hi!"); 

    //add some attributes 
    text.attr({ 
     "font-size": 22, 
     "font-family": "Arial, Helvetica, sans-serif" 
    }); 

    } 

};