1👍
✅
You can call the stroke function to draw the border. All the path coordinates are available in the tooltip object.
...
var strokeStyle = "red"
self.chart.ctx.lineWidth = 3;
Chart.helpers.each(self.datasets[0].points, function (point, index) {
Chart.helpers.each(self.datasets, function (dataset) {
self.chart.ctx.strokeStyle = strokeStyle;
var tooltip = 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
})
tooltip.draw()
self.chart.ctx.stroke();
var direction = 1;
if (tooltip.yAlign === "above")
direction = -1;
// erase out the rounded border near where the caret appears
self.chart.ctx.strokeStyle = self.options.tooltipFillColor;
self.chart.ctx.beginPath();
self.chart.ctx.moveTo(tooltip.x - tooltip.caretHeight, tooltip.y + direction * (tooltip.caretPadding + tooltip.caretHeight));
self.chart.ctx.lineTo(tooltip.x + tooltip.caretHeight, tooltip.y + direction * (tooltip.caretPadding + tooltip.caretHeight));
self.chart.ctx.stroke();
// draw the caret angle
self.chart.ctx.strokeStyle = strokeStyle;
self.chart.ctx.beginPath();
self.chart.ctx.moveTo(tooltip.x + tooltip.caretHeight, tooltip.y + direction * (tooltip.caretPadding + tooltip.caretHeight));
self.chart.ctx.lineTo(tooltip.x, tooltip.y + direction * tooltip.caretPadding);
self.chart.ctx.lineTo(tooltip.x - tooltip.caretHeight, tooltip.y + direction * (tooltip.caretPadding + tooltip.caretHeight));
self.chart.ctx.stroke();
});
...
Fiddle – http://jsfiddle.net/ubwLoern/
Source:stackexchange.com