title: Customize tooltip of donut chart in dimple.js
body: <p>I would like that my donut chart tooltip look like this:</p>
  
  <p><img src="https://i.stack.imgur.com/37Jta.png" alt="enter image description here"></p>
  
  <p>Until now I had tried this code snippet based in <a href="http://annapawlicka.com/pretty-charts-with-dimple-js/" rel="nofollow noreferrer">http://annapawlicka.com/pretty-charts-with-dimple-js/</a></p>
  
  <pre><code>// Handle the hover event - overriding the default behaviour
  s.addEventHandler("mouseover", onHover);
  // Handle the leave event - overriding the default behaviour
  s.addEventHandler("mouseleave", onLeave);
  
  myChart.draw();
  
  function onHover(e) {
      // Get the properties of the selected shape
      var cx = parseFloat(e.selectedShape.attr("x")),
          cy = parseFloat(e.selectedShape.attr("y"));
  
      // Set the size and position of the popup
      var width = 150,
          height = 70,
          x = (cx + width + 10 &lt; svg.attr("width") ?
               cx + 10 :
               cx - width - 20);  
          y = (cy - height / 2 &lt; 0 ?
              15 :
              cy - height / 2);
  
      // Create a group for the popup objects
      popup = svg.append("g");
  
      // Add a rectangle surrounding the text
      popup
              .append("rect")
              .attr("x",5)
              .attr("y",5)
              .attr("width", 100)
              .attr("height", 20)
              .attr("rx", 5)
              .attr("ry", 5)
              .style("fill", 'white')
              .style("stroke", 'black')
              .style("stroke-width", 2);
  
  
      // Add multiple lines of text
      popup
              .append('text')
              .attr('x', 17)
              .attr('y', 17)
              .text(e.seriesValue[0])
              .style("font-family", "sans-serif")
              .style("font-size", 10);
              }
  
  function onLeave(e) {
                  // Remove the popup
                  if (popup !== null) {
                      popup.remove();
                  }
              }
  </code></pre>
  
  <p>I'm having problems getting the position of the selected shape, because this part of the code does not seem to work with donut charts.         </p>
  
  <pre><code>var cx = parseFloat(e.selectedShape.attr("x")),
      cy = parseFloat(e.selectedShape.attr("y"));
  </code></pre>
  
  <p>Thats why I'm not using cx or cy, because I got NaN. The rest of the code seems to work fine and I can edit the text, text color, background and some other things.</p>
  
  <p>I would like to know how to get the posistion of the hovered shape and if its possible (I guess I'm asking too much...), get the arrow-form (whatever its called) of the rectangle tooltip.</p>