title: Add border to Chart.js tooltips
body: <p>Is it possible to add a border to ChartJS tooltips and set the color of the border? And if it is possible, how it could be implemented?</p>
  
  <p>Here's my code:</p>
  
  <p><a href="http://jsfiddle.net/JohnnyJuarez/4sgqjtj5/" rel="nofollow">JSFiddle</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;script src="http://www.chartjs.org/assets/Chart.min.js"&gt;&lt;/script&gt;
  
  &lt;canvas id="weeksChart" width="651" height="335"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>Chart.types.Line.extend({
      name: "LineAlt",
      draw: function (data) {
          this.scale.startPoint = 25;
          Chart.types.Line.prototype.draw.apply(this, arguments);
      }
  });
  
  
  var dayTemperatureArray = [-5, 14, 15, 15, 17, 18, 19, 21, 22, 25, 24, 20, 19, 16];
  var nightTemperatureArray = [-10, 4, 5, 6, 8, 11, 12, 15, 17, 15, 13, 12, 11, 9];
  
  var dataWeeks = {
      labels: ["16.02", "17.02", "18.02", "19.02", "20.02", "21.02", "22.02", "23.02", "24.02", "25.02", "26.02", "27.02", "28.02", "01.03"],
      datasets: [{
          label: "Days temperature chart",
          fillColor: "transparent",
          strokeColor: "rgba(244, 6, 6, 1)",
          data: dayTemperatureArray
      }, {
          label: "Nights temperature chart",
          strokeColor: "#3f6bf5",
          data: nightTemperatureArray
      }]
  };
  
  
  var animationComplete = function () {
      var self = this;
  
      Chart.helpers.each(self.datasets[0].points, function (point, index) {
          Chart.helpers.each(self.datasets, function (dataset) {
              new Chart.Tooltip({
                  x: point.x,
                  y: dataset.points[index].y,
                  xPadding: self.options.tooltipXPadding,
                  yPadding: self.options.tooltipYPadding,
                  fillColor: self.options.tooltipFillColor,
                  textColor: dataset.strokeColor,
                  fontFamily: self.options.tooltipFontFamily,
                  fontStyle: self.options.tooltipFontStyle,
                  fontSize: self.options.tooltipFontSize,
                  caretHeight: self.options.tooltipCaretSize,
                  cornerRadius: self.options.tooltipCornerRadius,
                  cornerRadius: self.options.tooltipCornerRadius,
                  text: dataset.points[index].value + '°',
                  chart: self.chart,
                  custom: self.options.customTooltips
              }).draw()
  
  
          });
  
          self.chart.ctx.font = Chart.helpers.fontString(self.fontSize, self.fontStyle, self.fontFamily)
          self.chart.ctx.textAlign = 'center';
          self.chart.ctx.textBaseline = "middle";
          self.chart.ctx.fillStyle = "#666";
          self.chart.ctx.fillText(point.label, point.x, self.scale.startPoint - 12);
      });
  };
  
  var ctx = document.getElementById("weeksChart").getContext("2d");
  window.weeksChart = new Chart(ctx).LineAlt(dataWeeks, {
      responsive: true,
      pointDot: true,
      datasetStrokeWidth: 0.5,
      scaleSteps: 2,
      scaleLabel: "&lt;%=value + '°'%&gt;",
      tooltipTemplate: "&lt;%= value %&gt;",
      showTooltips: true,
      scaleShowLabels: false,
      scaleFontColor: "transparent",
      onAnimationComplete: function () {
          animationComplete.apply(this)
      },
      tooltipEvents: []
  });
  </code></pre>
  
  <p>I've tried different combinations with <code>tooltipBorderColor</code>, but obviously it isn't correct way for that thing I try to do...</p>