diff --git a/docs/09-Advanced.md b/docs/09-Advanced.md
index 5ea957179a6..db346bc94d2 100644
--- a/docs/09-Advanced.md
+++ b/docs/09-Advanced.md
@@ -173,6 +173,8 @@ var myPieChart = new Chart(ctx, {
 				// tooltip.text
 				// tooltip.x
 				// tooltip.y
+				// tooltip.caretX
+				// tooltip.caretY
 				// etc...
 			}
 		}
diff --git a/samples/line-customTooltips.html b/samples/line-customTooltips.html
index 6695cb66346..9272caff8b6 100644
--- a/samples/line-customTooltips.html
+++ b/samples/line-customTooltips.html
@@ -4,7 +4,6 @@
 <head>
   <title>Line Chart with Custom Tooltips</title>
   <script src="../dist/Chart.bundle.js"></script>
-  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
   <style>
     canvas{
       -moz-user-select: none;
@@ -34,76 +33,82 @@
 
 <body>
   <div id="canvas-holder1" style="width:75%;">
-    <canvas id="chart1"/>
+    <canvas id="chart"/>
   </div>
   <script>
-    window.count = 0;
     Chart.defaults.global.pointHitDetectionRadius = 1;
-    var customTooltips = function(tooltip) {
 
+    var customTooltips = function(tooltip) {
       // Tooltip Element
-      var tooltipEl = $('#chartjs-tooltip');
+      var tooltipEl = document.getElementById('chartjs-tooltip');
 
-      if (!tooltipEl[0]) {
-        $('body').append('<div id="chartjs-tooltip"></div>');
-        tooltipEl = $('#chartjs-tooltip');
+      if (!tooltipEl) {
+        var div = document.createElement('div');
+        div.id = 'chartjs-tooltip';
+        document.body.appendChild(div);
+        tooltipEl = document.getElementById('chartjs-tooltip');
       }
 
       // Hide if no tooltip
-      if (!tooltip.opacity) {
-        tooltipEl.css({
-          opacity: 0
-        });
-        $('.chartjs-wrap canvas')
-          .each(function(index, el) {
-            $(el).css('cursor', 'default');
-          });
+      if (tooltip.opacity === 0) {
+        tooltipEl.style.opacity = 0;
+        document.querySelector('.chartjs-wrap').style.cursor = 'default';
         return;
       }
 
-      $(this._chart.canvas).css('cursor', 'pointer');
+      this._chart.canvas.style.cursor = 'pointer';
 
       // Set caret Position
-      tooltipEl.removeClass('above below no-transform');
+      tooltipEl.classList.remove('above', 'below', 'no-transform');
       if (tooltip.yAlign) {
-        tooltipEl.addClass(tooltip.yAlign);
+        tooltipEl.classList.add(tooltip.yAlign);
       } else {
-        tooltipEl.addClass('no-transform');
+        tooltipEl.classList.add('no-transform');
+      }
+
+      function joinBody(bodyItem) {
+        return [].concat(bodyItem.before, bodyItem.lines, bodyItem.after).join('\n')
       }
 
       // 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')
+          (tooltip.beforeTitle || []).join('\n'), 
+          (tooltip.title || []).join('\n'), 
+          (tooltip.afterTitle || []).join('\n'), 
+          (tooltip.beforeBody || []).join('\n'), 
+          (tooltip.body || []).map(joinBody).join('\n'), 
+          (tooltip.afterBody || []).join('\n'), 
+          (tooltip.beforeFooter || []).join('\n'), 
+          (tooltip.footer || []).join('\n'), 
+          (tooltip.afterFooter || []).join('\n')
         ];
-        tooltipEl.html(innerHtml.join('\n'));
+        tooltipEl.innerHTML = innerHtml.join('\n');
       }
 
       // Find Y Location on page
       var top = 0;
       if (tooltip.yAlign) {
         if (tooltip.yAlign == 'above') {
-          top = tooltip.y - tooltip.caretHeight - tooltip.caretPadding;
+          top = tooltip.caretY - tooltip.caretHeight - tooltip.caretPadding;
         } else {
-          top = tooltip.y + tooltip.caretHeight + tooltip.caretPadding;
+          top = tooltip.caretY + tooltip.caretHeight + tooltip.caretPadding;
         }
       }
 
-      var position = $(this._chart.canvas)[0].getBoundingClientRect();
+      var position = this._chart.canvas.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',
-        top: position.top + top + 'px',
-        fontFamily: tooltip._fontFamily,
-        fontSize: tooltip.fontSize,
-        fontStyle: tooltip._fontStyle,
-        padding: tooltip.yPadding + 'px ' + tooltip.xPadding + 'px',
-      });
+      tooltipEl.style.opacity = 1;
+      tooltipEl.style.width = tooltip.width ? (tooltip.width + 'px') : 'auto';
+      tooltipEl.style.left = position.left + tooltip.caretX + 'px';
+      tooltipEl.style.top = position.top + top + 'px';
+      tooltipEl.style.fontFamily = tooltip._fontFamily;
+      tooltipEl.style.fontSize = tooltip.fontSize;
+      tooltipEl.style.fontStyle = tooltip._fontStyle;
+      tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
     };
+    
     var randomScalingFactor = function() {
       return Math.round(Math.random() * 100);
     };
@@ -119,7 +124,7 @@
     };
 
     window.onload = function() {
-      var chartEl = document.getElementById("chart1");
+      var chartEl = document.getElementById("chart");
       window.myLine = new Chart(chartEl, {
         type: 'line',
         data: lineChartData,
diff --git a/src/core/core.tooltip.js b/src/core/core.tooltip.js
index 1e02fee7780..af8d3197cd8 100755
--- a/src/core/core.tooltip.js
+++ b/src/core/core.tooltip.js
@@ -465,14 +465,18 @@ module.exports = function(Chart) {
 				width: existingModel.width,
 				height: existingModel.height
 			};
+			var tooltipPosition = {
+				x: existingModel.caretX,
+				y: existingModel.caretY
+			};
 
 			var i, len;
 
 			if (active.length) {
 				model.opacity = 1;
 
-				var labelColors = [],
-					tooltipPosition = Chart.Tooltip.positioners[opts.position](active, me._eventPosition);
+				var labelColors = [];
+				tooltipPosition = Chart.Tooltip.positioners[opts.position](active, me._eventPosition);
 
 				var tooltipItems = [];
 				for (i = 0, len = active.length; i < len; ++i) {
@@ -520,6 +524,10 @@ module.exports = function(Chart) {
 			model.width = tooltipSize.width;
 			model.height = tooltipSize.height;
 
+			// Point where the caret on the tooltip points to
+			model.caretX = tooltipPosition.x;
+			model.caretY = tooltipPosition.y;
+
 			me._model = model;
 
 			if (changed && opts.custom) {
