Javascript悬停函数

我正在用javascript测试raphael，并试图掌握它的窍门。目前，我正在尝试获取它，这样当用户将鼠标悬停在我绘制的拉斐尔中的一个圆上时，它将创建一个简单的悬停消息，如hi。然而，我在这方面坚持到底，我似乎无能为力，这方面的任何帮助都将是巨大的

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

HTML

你好

只需使用

元素.hover（）

函数，如上所述

更新：如果您将下面发布的代码片段复制到自己的计算机上并在本地运行，则该代码片段可以正常工作。但是，要在堆栈溢出上实际运行此代码段，它只在某些浏览器上工作（例如，它在Firefox上工作，但在Chrome上不工作），这可能是因为不同的浏览器允许或不允许代码段加载此代码段所需的外部库，如Raphael.js

window.onload=function（）{
var纸张=新拉斐尔（0,0,400,400）；
var backGround=paper.rect（0,040400）；
backGround.attr({
填充：“橙色”
});
变量面=纸。圆（200200100）；
face.attr({
填充：“红色”
});
悬停（hoverHandler）；
};
函数hoverHandler（）{
警报（“hi”）；
}

你好

有没有办法让它看起来像一个小盒子，而不是这个大盒子？你可能想知道如何从发出警报变为显示一个较小的普通HTML元素（例如一个小div）？

<div class= "bot">
    <p>Hi there</p>
</div>