title: Move tooltip further from data point for Chart.js?
body: <p>I started messing with Chart.js today, and I'm really impressed so far by how easy it is to understand, even for a javascript beginner like myself.</p>
  
  <p>I'm wanting to add some spacing horizontally between the tooltip and the data point on the graph. By default, the caret point touches the data point. I can't figure it out. I know there's a <code>position</code> option, but I don't quite get how it's used. I also tried using the <code>tooltips: { x }</code> option but no luck either. Guessing I'm misunderstanding what that is for.</p>
  
  <p>Below is what I have so far for one chart...</p>
  
  <p>Thanks, appreciate it!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//Global Chart.js options
  Chart.defaults.global.defaultFontFamily = 'Lato';
  Chart.defaults.global.elements.responsive = true;
  Chart.defaults.global.tooltips.xPadding = 10;
  Chart.defaults.global.tooltips.yPadding = 10;
  Chart.defaults.global.tooltips.titleMarginBottom = 10;
  Chart.defaults.global.tooltips.position = 'average';
  
  //Individual chart config
  var ctx = "myChart";
  var myChart = new Chart(ctx, {
    type: 'line',
    options: {
      title: {
        display: true,
        text: 'Precision-Recall Curve',
      },
      layout: {
        padding: 32
      },
      tooltips: {
        x: 20
      },
    },
    data: {
      labels: ['0%', '10%', '20%', '30%', '40%', '50%', '60%', '70%', '80%', '90%', '100%'],
      datasets: [{
        label: 'Precision',
        data: [2, 42, 55, 50, 42, 38, 32, 24, 20, 18, 18],
        borderColor: '#1abc9c',
        backgroundColor: 'RGBA(26, 188, 156, .4)',
        pointBorderColor: "#4BC0C0",
        pointBackgroundColor: "#fff",
        pointHitRadius: 10
      }, {
        label: 'Recall',
        data: [2, 12, 24, 30, 39, 58, 70, 82, 86, 89, 93],
        borderColor: '#34495e',
        backgroundColor: 'RGBA(52, 73, 94, .3)',
        pointBorderColor: "#34495e",
        pointBackgroundColor: "#fff",
        pointHitRadius: 10
      }]
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div&gt;
      &lt;canvas id="myChart"&gt;&lt;/canvas&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>