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
    GreixaP Feb 26, 2016 2:07 AM

      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

      yepnope({

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

        complete: function() {

        // Enable SVG access

        EC.SVG.accessSVG(sym.$("mapa")).done(

        function(svgDocument){

        //colores

        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){

        $(e.currentTarget).css({opacity:0.5});

        sym.getSymbol("tooltip").$("pais").html(e.currentTarget.id);

        });

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

        $(e.currentTarget).css({opacity:1});

        });

       

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

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

      function mouseMove(e) {

        sym.$("tooltip").css({

          "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??