RaphaelJs example 1

HTML

<div id="canvas_container"></div>

CSS

#canvas_container {
    width: 500px;
    height: 300px;
    border: 1px solid #aaa;
}

JavaScript

window.onload = function() {
    Raphael.el.tooltip = function (tp) {
  this.tp = tp;
  this.tp.ox = 0;
  this.tp.oy = 0;
  this.tp.hide();
  this.hover(
    function(event) { 
      this.mousemove(function(event) { 
        this.tp.translate(event.clientX - 
          this.tp.ox,event.clientY - this.tp.oy);
        this.tp.ox = event.clientX;
        this.tp.oy = event.clientY;
      });
      this.tp.show().toFront();
    }, 
    function(event) {
      this.tp.hide();
      this.unmousemove();
    }
  );
  return this;
};
    
    var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
    var circle = paper.circle(100, 100, 80)
    .attrs({'background-color': 'blue'});
        .tooltip(paper.rect(0,0,20,30));
    
    for(var i = 0; i < 5; i+=1) {
        var multiplier = i*5;
        paper.circle(250 + (2*multiplier), 100 + multiplier, 50 - multiplier)
    }
    
    var rectangle = paper.rect(200, 200, 250, 100);
 
}