// Boolean - Determines whether to draw tooltips on the canvas or not
showTooltips: true,
- // Function - Determines whether to execute the externalTooltips function instead of drawing the built in tooltips (See [Advanced - External Tooltips](#advanced-usage-external-tooltips))
- externalTooltips: false,
+ // Function - Determines whether to execute the customTooltips function instead of drawing the built in tooltips (See [Advanced - External Tooltips](#advanced-usage-custom-tooltips))
+ customTooltips: false,
// Array - Array of string names to attach tooltip events
tooltipEvents: ["mousemove", "touchstart", "touchmove"],
### External Tooltips
-You can enable external tooltips in the global or chart configuration like so:
+You can enable custom tooltips in the global or chart configuration like so:
```javascript
var myPieChart = new Chart(ctx).Pie(data, {
- externalTooltips: function(tooltip) {
+ customTooltips: function(tooltip) {
// tooltip will be false if tooltip is not visible or should be hidden
if (!tooltip) {
});
```
-See files `sample/pie-externalTooltips.html` and `sample/line-externalTooltips.html` for examples on how to get started.
+See files `sample/pie-customTooltips.html` and `sample/line-customTooltips.html` for examples on how to get started.
### Writing new chart types
showTooltips: true,
// Boolean - Determines whether to draw built-in tooltip or call custom tooltip function
- externalTooltips: false,
+ customTooltips: false,
// Array - Array of string names to attach tooltip events
tooltipEvents: ["mousemove", "touchstart", "touchmove", "mouseout"],
this.activeElements = ChartElements;
}
this.draw();
- if(this.options.externalTooltips){
- this.options.externalTooltips(false);
+ if(this.options.customTooltips){
+ this.options.customTooltips(false);
}
if (ChartElements.length > 0){
// If we have multiple datasets, show a MultiTooltip for all of the data points at that index
title: ChartElements[0].label,
chart: this.chart,
ctx: this.chart.ctx,
- external: this.options.externalTooltips
+ custom: this.options.customTooltips
}).draw();
} else {
cornerRadius: this.options.tooltipCornerRadius,
text: template(this.options.tooltipTemplate, Element),
chart: this.chart,
- external: this.options.externalTooltips
+ custom: this.options.customTooltips
}).draw();
}, this);
}
ctx.fillStyle = this.fillColor;
// Custom Tooltips
- if(this.external){
- this.external(this);
+ if(this.custom){
+ this.custom(this);
}
else{
switch(this.yAlign)
},
draw : function(){
// Custom Tooltips
- if(this.external){
- this.external(this);
+ if(this.custom){
+ this.custom(this);
}
else{
drawRoundedRectangle(this.ctx,this.x,this.y - this.height/2,this.width,this.height,this.cornerRadius);