tonyf tonyf - 6 months ago 17
Javascript Question

Hover Title over an SVG Circle

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


Would really appreciate any help on how to achieve a hover title over this bigCircle to display some title text.

Furthermore, wanting to do this in plain javascript, no jQuery thanks.

Thanks.

Answer

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>

Comments