Hover title over an SVG circle

Question

Using snapsvg.io, I would like to know if it's possible to add a title to an SVG circle like you can with the <img> tag when hovering over the image but on a SVG circle?

Using some example code from snapsvg.io website:

var s = Snap("#svg");
var bigCircle = s.circle(150, 150, 100);
bigCircle.attr({
    fill: "#bada55",
    stroke: "#000",
    strokeWidth: 5
});

How can I achieve a hover title over this bigCircle to display some title text? I'd like to do this in plain JavaScript.

Answer 1

You could just create a title child of the circle. There's no snap title creator but you can use Snap.parse to create one natively.

var s = Snap("#svg");
var bigCircle = s.circle(150, 150, 100);
bigCircle.attr({
    fill: "#bada55",
    stroke: "#000",
    strokeWidth: 5
});

var title = Snap.parse('<title>This is a title</title>');
bigCircle.append(title);

html, body, svg {
  width: 100%;
  height: 100%;
}

<script src="http://svg.dabbles.info/snap.svg.js"></script>
<svg id="svg"></svg>