1 Reply Latest reply on Feb 26, 2016 2:20 AM by GreixaP

    Is it possible to use a handmade tooltip within an interactive svg?

    GreixaP Level 1

      These are the steps I have gone through:

      1. Renamed the layers of a map in Illustrator and then export it as a svg.


      2. Import this svg map on the Edge Animate stage and then write the code to paint several countries according to its id (=layers renamed):

      // Load Edge Commons


        load: "http://cdn.edgecommons.org/an/1.4.0/js/min/EdgeCommons.js",

        complete: function() {

        // Enable SVG access




        var c1 = "#e74459";

        var c2 = "#f58f72";

        var c3 = "#f5db69";

        var c4 = "#66b05e";

        var c0 = "#c0c0c0";

        $("path", svgDocument).css({"cursor":"pointer"});

        $("#alemania", svgDocument).css("fill", c4);

        $("#brasil", svgDocument).css("fill", c1);

        $("#rusia", svgDocument).css("fill", c3);

        $("#indonesia", svgDocument).css("fill", c3);

        $("#kazajistan", svgDocument).css("fill", c3);

        $("#sudafrica", svgDocument).css("fill", c2);

        $("#estadosunidos", svgDocument).css("fill", c2);

        $("#portugal", svgDocument).css("fill", c1);

        $("#italia", svgDocument).css("fill", c4);





      3. Then I made a symbol as a tooltip, so I inserted this code to show the text according to the id of the target selected (path) and also to change its opacity:

      $("path", svgDocument).mouseover(function(e){




        $("path", svgDocument).mouseout(function(e){




      4. Lastly I wrote the lines to made this tooltip follow the mouse:

      document.getElementById('Stage').addEventListener('mousemove', mouseMove, false);

      function mouseMove(e) {


          "left" : e.pageX,

          "top" : e.pageY




      And here was the problem: svg doesn't seem to allow the mouseMove function. I put a circle on top of the map so I could see that this code was working as long as I didn't hover the svg. It shows the id, but the tooltip doesn't move (if I try to click on the symbol it also changes, but because the symbol itself is on top of the map).


      Any solution??