Change the title attribute of raphael objects - html

Question

I'm working with raphael.js to draw and I want to modify the title attribute (change color, font size, etc., ).
circle.attr({
title: 'This is a circle.',
fill: 'red'
});
Here's my jsfiddle.
Is there a way to do this? Or maybe add custom tooltips to raphael objects?
Edit: Here's an expected modification: I wanna print "Hello World" on my tooltip. "Hello" in red, then a "new line" character and finally, "World" in blue color.
This doesn't work but might help to get an idea on what I'm trying to do.
circle.attr({
title:"<font color="red">Hello</font><br><font color="blue">World!</font>"
});

Answer 1

Raphael does not have shorthand functions for this, but you can very easily alter the rendered SVG elements by simple DOM manipulation :
circle.node.onmouseover = function() {
this.style.cursor = 'pointer'
this.querySelector('title').textContent = 'This is a new title';
}
forked (now actually working) fiddle -> http://jsfiddle.net/nheL8add/
Update : I now realize that you are actually asking : "does a HTML element title attribute supports HTML?" (I was totally focusing on changing the title element, not the part efter "Edit"). The answer is no. The title attribute of a circle element is completely the same as any other title attribute in all other HTML elements. But you can use a tooltip script like qTip2 or similar to get the desired effect. I recommend qtip2 since it support <SVG> elements. Skip the title attribute on the circle element itself and use qTip2 instead :
$("#canvas circle").qtip({
style: { classes: 'tooltip' },
content: { text: '<font color="red">Hello</font><br><font color="blue">World!</font>' },
position:{ my:'center center', at:'center center' },
show: 'mousemove mouseenter mouseover'
});
yet another forked fiddle -> http://jsfiddle.net/ajLnhete/