Tooltip plugin for Chartist.js

Available options and their defaults

var defaultOptions = {
 currency: undefined, //accepts '£', '$', '€', etc.
 //e.g. 4000 => 4,000ドル
 tooltipFnc: undefined, //accepts function
 //build custom tooltip
 transformTooltipTextFnc: undefined, // accepts function
 // transform tooltip text
 class: undefined, // accecpts 'class1', 'class1 class2', etc.
 //adds class(es) to tooltip wrapper
 anchorToPoint: false, //accepts true or false
 //tooltips do not follow mouse movement -- they are anchored to the point / bar.
 appendToBody: false //accepts true or false
 //appends tooltips to body instead of chart container
};

Sample usage in Chartist.js

var chart = new Chartist.Line('.ct-chart', {
 labels: [1, 2, 3],
 series: [
 [
 {meta: 'description', value: 1},
 {meta: 'description', value: 5},
 {meta: 'description', value: 3}
 ],
 [
 {meta: 'other description', value: 2},
 {meta: 'other description', value: 4},
 {meta: 'other description', value: 2}
 ]
 ]
}, {
 plugins: [
 Chartist.plugins.tooltip()
 ]
});

var chart = new Chartist.Line('.ct-chart', {
 labels: [1, 2, 3, 4, 5, 6, 7],
 series: [
 [1, 5, 3, 4, 6, 2, 3],
 [2, 4, 2, 5, 4, 3, 6]
 ]
}, {
 plugins: [
 Chartist.plugins.tooltip()
 ]
});

var chart = new Chartist.Line('.ct-chart', {
 labels: [1, 2, 3],
 series: [
 [
 {meta: 'description', value: 1},
 {meta: 'description', value: 5},
 {meta: 'description', value: 3}
 ],
 [
 {meta: 'other description', value: 2},
 {meta: 'other description', value: 4},
 {meta: 'other description', value: 2}
 ]
 ]
}, {
 plugins: [
 Chartist.plugins.tooltip({
 currency: '$',
 class: 'class1 class2',
 appendToBody: true
 })
 ]
});

Custom point element.

'ct:value': data.value.y,
'ct:meta': data.meta,

chart.on('draw', function(data) {
 // If the draw event was triggered from drawing a point on the line chart
 if(data.type === 'point') {
 // We are creating a new path SVG element that draws a triangle around the point coordinates
 var circle = new Chartist.Svg('circle', {
 cx: [data.x],
 cy: [data.y],
 r: [5],
 'ct:value': data.value.y,
 'ct:meta': data.meta,
 class: 'my-cool-point',
 }, 'ct-area');
 // With data.element we get the Chartist SVG wrapper and we can replace the original point drawn by Chartist with our newly created triangle
 data.element.replace(circle);
 }
});

plugins: [
 Chartist.plugins.tooltip({
 appendToBody: true,
 pointClass: 'my-cool-point'
 })
 ]