Chart.js: Tooltip documentation needs improvements regarding custom tooltips

[etimberg]

We should provide more docs on how to use custom tooltips and what problem they are intended to fix.

We should also do a better job documenting what the tooltipItem struct contains

[Jaded-Design]

Until this can be done here are some quick helpers for people looking for answers to common situations:

Here is how to put together a basic label:

 options: {
      animation: false,
           tooltips: {
              callbacks: {
                  label: function (tooltipItem, data) { return data.datasets[tooltipItem.datasetIndex].label + ' - ' + tooltipItem.yLabel}
                    }
                },

And here is how to return a label and then format the number to a currency:

options: {
  animation: false,
  tooltips: {
        callbacks: {
            label: function (tooltipItem, data) { return data.datasets[tooltipItem.datasetIndex].label + ' - ' + '$' + Number(tooltipItem.yLabel).toFixed(0).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");}
                    }
                },

[GuySilva]

Hi guyz,
I've been runing around in circles trying to make this work, but your examples and docs never do so.

I have just tested the example Jaded-Design posted, the first one about "how to put together a basic label" and although i was able to add text to the end of the tooltip, the first part of it was left as "undefined", followed by empy space after the fist dash, and then a dash followed by the text i added.

Here's my code:

`
var ctx = document.getElementById("myChart").getContext("2d");
var config = {
type: 'pie',
data: {

                datasets: [{
                    data: [
                        100,
                        58,
                        85,
                        23,
                        65,
                        85,
                        23,
                        65,
                        65
                    ],
                    backgroundColor: [
                        "#F7464A",
                        "#46BFBD",
                        "#FDB45C",
                        "#949FB1",
                        "#4D5360",
                        "#dd921b",
                        "#1bdd7c",
                        "#4533b2",
                        "#e25ca1"
                    ]
                }],
                labels: [
                    "Depósitos à Ordem",
                    "Depósitos a Prazo",
                    "Contas Poupança",
                    "Seguros Capitalização",
                    "Carteira Investimento",
                    "Fundos Investimento",
                    "Títulos Investimento",
                    "Títulos Capital",
                    "Bolsa"
                ]
            },
            options: {
                responsive: true,
                tooltips: {
                    callbacks: {
                        label: function (tooltipItem, data) { return data.datasets[tooltipItem.datasetIndex].label + ' - ' + tooltipItem.yLabel + ' - my text'}
                    }


                },
                legend: {
                    display: true,
                }
            }
        };

        var myChart = new Chart(ctx, config);`

I know this is a free solution and you guyz do amazing work developping it, but realy, the documentation leaves a lot of empty holes... it would be nice to have full working examples that actually work using the most recent build, instead of its and bits scatered around gihub that when we try to put them togheter rarely work leaving us mere mortals desperate to make it work

[Jaded-Design]

Got it working here:

https://jsfiddle.net/vLw2zfs2/4/

Needed to have
return data.labels[tooltipItem.index]

[GuySilva]

Thx Jaded. With the corrections to your initial example i was able to get the tooltips showing... now this brings me to the issue i started on , which is how to change the text color of the tooptip text... i can change the background color, but none of the documented properties seems to take any effect on the text color. Can you help out on this?

[Jaded-Design]

Yeah, it doesn't look like there's an easy way to do it but this may help you find an answer as it looks like it's "possible":

https://github.com/chartjs/Chart.js/blob/master/samples/line-customTooltips.html

[geoffrey-eisenbarth]

At the moment it seems like the following doesn't work:

Chart.defaults.global.tooltips.callbacks.label = function(tooltipItem, data) { return <blah> } .

I was able to get my custom function to work only if I reassigned the .label property after declaring the object. I'm using the CDN with v2.2.1.

[Rolos]

I am having this same problem, this doesn't work:
Chart.defaults.global.tooltips.callbacks = { label: function(items, data){ return items.yLabel + ' €'; } }

[etimberg]

Fixed in #3751