Showing the Tooltip Javascript

SVG Graphing

// Circle gets the sqaure. <circle> is an SVG dom element and has hover events.
// setting up the circle hover event using JQuery
$("circle").hover(function() {
  
  // get the tooltip, and put some stuff in it
  $(".chart-wrapper .tooltip-inner .stuff")
     // because the circle is an element, I can add data to it
     .text("Queries/Day: " + $(this).attr("calls") + " (" + $(this).attr("date") + ")");
  
  // position, and show the tooltip
  $(".chart-wrapper .tooltip")
     .css({
       "display" : "block",
       "opacity" : 1,
       "top" : parseInt($(this).attr("cy").baseVal.value + 5)+"px",
       "left" : parseInt($(this).attr("cx").baseVal.value + 10)+"px"
     });

  }, function() {
    
    // hover out, so just hide it
    $(".chart-wrapper .tooltip").css({"opacity":0,"display":"none"});

});