Correct Chart.JS 2 Custom Tooltips

The code in the sample for the Chart.JS 2.0 pie with custom tooltips had y position bug, this addresses it.

by samu_eyes

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.0/Chart.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<div id="canvas-holder" style="width: 300px;">
  <canvas id="chart-area2" width="300" height="300" />
</div>

<div id="chartjs-tooltip"></div>

CSS

#canvas-holder {
  width: 100%;
  margin-top: 50px;
  text-align: center;
}

#chartjs-tooltip {
  opacity: 1;
  position: absolute;
  background: rgba(0, 0, 0, .7);
  color: white;
  border-radius: 3px;
  -webkit-transition: all .1s ease;
  transition: all .1s ease;
  pointer-events: none;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}

.chartjs-tooltip-key {
  display: inline-block;
  width: 10px;
  height: 10px;
}

JavaScript

Chart.defaults.global.tooltips.custom = function(tooltip) {
  // Tooltip Element
  var tooltipEl = $('#chartjs-tooltip');
  if (!tooltipEl[0]) {
    $('body').append('<div id="chartjs-tooltip"></div>');
    tooltipEl = $('#chartjs-tooltip');
  }
  // Hide if no tooltip
  if (!tooltip.opacity) {
    tooltipEl.css({
      opacity: 0
    });
    $('.chartjs-wrap canvas').each(function(index, el) {
      $(el).css('cursor', 'default');
    });
    return;
  }
  $(this._chart.canvas).css('cursor', 'pointer');
  // Set caret Position
  tooltipEl.removeClass('above below no-transform');
  if (tooltip.yAlign) {
    tooltipEl.addClass(tooltip.yAlign);
  } else {
    tooltipEl.addClass('no-transform');
  }
  // Set Text
  if (tooltip.body) {
    var innerHtml = [
      (tooltip.beforeTitle || []).join('\n'), (tooltip.title || []).join('\n'), (tooltip.afterTitle || []).join('\n'), (tooltip.beforeBody || []).join('\n'), (tooltip.body || []).join('\n'), (tooltip.afterBody || []).join('\n'), (tooltip.beforeFooter || [])
      .join('\n'), (tooltip.footer || []).join('\n'), (tooltip.afterFooter || []).join('\n')
    ];
    tooltipEl.html(innerHtml.join('\n'));
  }
  // Find Y Location on page
  var top = 0;
  
  console.log('tooltip.yAlign: ' + tooltip.yAlign);
  console.log('tooltip.y: ' + tooltip.y);
  console.log('tooltip.caretHeight: ' + tooltip.caretHeight);
  console.log('tooltip.caretPadding: ' + tooltip.caretPadding);
 
  if (tooltip.yAlign) {
    var ch = 0;
    if (tooltip.caretHeight) {
      ch = tooltip.caretHeight;
    }
    if (tooltip.yAlign == 'above') {
      top = tooltip.y - ch - tooltip.caretPadding;
    } else {
      top = tooltip.y + ch + tooltip.caretPadding;
    }
  }

  console.log('top: ' + top);

  var position = $(this._chart.canvas)[0].getBoundingClientRect();
  // Display, position, and set styles for font
  tooltipEl.css({
    opacity: 1,
    width: tooltip.width ? (tooltip.width + 'px') : 'auto',
    left: position.left + tooltip.x + 'px',
   ...