title: jQuery Sparklines with CSS Transform
body: <p>I'm using <a href="https://omnipotent.net/jquery.sparkline/#s-about" rel="nofollow noreferrer">jQuery Sparklines</a> on an html page which is scaled using <code>transform: scale</code>. Unfortunately, this causes the tooltip generated by jQuery Sparklines to be displayed in the wrong spot.
  For example, the following code...</p>
  
  <pre><code>&lt;style&gt;
  body {
    transform: scale(0.7); 
    transform-origin: 0 0;
  }
  &lt;/style&gt;
  
  &lt;script type="text/javascript" src="jquery-3.2.1.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="jquery.sparkline.min.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
    $(function() {
      var myvalues = [10,8,5,7,4,4,10];
      $('#line').sparkline(myvalues, {
          type: 'line'
      });
  });
  &lt;/script&gt;
  
  &lt;div&gt; random text random text random text random text random text random text &lt;span id="line"&gt;&lt;/span&gt;  &lt;/div&gt;
  </code></pre>
  
  <p>... results in this:</p>
  
  <p><a href="https://i.stack.imgur.com/YERkt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YERkt.png" alt="enter image description here"></a></p>
  
  <p>Is there some way to fix this behaviour?</p>