Raphael.el.setToolTipText = function(tip) {
this.paper.setStart();
// Create background
var frameEl = this.paper.rect(0.5, 0.5, 0, 0);
// Create text element
var textEl = this.paper.text(5, 0, tip).attr({‘text-anchor’:'start’, ‘font-size’:11})
var bbox = textEl.getBBox();
// Resize the background to fit the text
frameEl.attr({width:bbox.width + 10, height: bbox.height+10, fill: ‘#f0f0f0′, ‘stroke-width’:1, stroke:’#cccccc’});
// Move the text vertically to position it correctly
textEl.attr({y: Math.round(bbox.height/2)+5});
var set = this.paper.setFinish();
this.tooltip(set);
}

You can call this function like this:
var rect = paper.rect(0, 0, 5, 5);
rect.setToolTipText(‘This is a:\nTool Tip!’);

I noticed that hovering my element a few times was slowing the tooltip to the point that it was unusable. I solved the problem by moving the ‘mousemove’ event outside the hover method, so the element doesn’t get rebind each time the user hover it.

Raphael.el.tooltip = function (tp) {
this.tp = tp;
this.tp.ox = 0;
this.tp.oy = 0;
this.tp.hide();
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.hover(
function(event){
this.tp.show().toFront();
},
function(event){
this.tp.hide();
this.unmousemove();
});
return this;
};

I really love your Dracula package, it’s so easy to use, beautiful and just a godsend for my project! Thank you so much for putting in the time to make such an elegant library!

I tried incorporating tooltips similar to your “Showcase”, but I got something like this instead:
http://www.stanford.edu/~lletitia/Dracula/li_dracula2.html
It looks kind of broken, and I’d like to keep the graph edges and default colourful oval nodes. Is there any way to attach tooltips to the regular nodes without drawing custom node objects?

Thanks,
Letitia

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

I just used “translate” instead of setting the coordinates via “attr”.

What I’m trying to do now is pass a set to the function, so that I can have a tooltip with a box with some writing in it. The code below creates a set and passes them to the function, but I can’t get the text and the rect to be centered on each other:

    var set = paper.set();
    set.push(
        paper.rect(0, 0, 50, 10).attr({'fill': 'yellow'}),
        paper.text(25, 5, "Test")
    );
 
    paper.rect(200, 200, 200, 200, 10).attr({'fill': 'red'}).tooltip(set);

1. Unfortunately, during the upgrade process to WordPress 3, all the comments got lost somehow. You are free to comment again!
2. There’s a new site anyway, check out http://graphdracula.net