Tooltips

The animation duration does not affect tooltips, which have their own configuration. Besides animation, you can configure colors, fonts, spacing, shape, and behaviors in tooltips. You can also declare callback functions that change the appearance and content at every interaction. If you need to add more information to a tooltip, Chart.js allows you to create sophisticated HTML tooltips containing images and text.

For example, the following configuration creates black tooltips that contain default title colors. The tooltip configuration options contain callbacks that set text colors that match the colors of the bars, as follows:

options: {
     …
     title: {…},
     legend: {…},
     animation: {…},
     tooltips: {
       backgroundColor: 'rgba(200,200,255,.9)',
       titleFontColor: 'black',
       caretSize: 5,
       callbacks: {
           labelColor: function(tooltipItem, chart) {
              return {
                  borderColor: 'black',
                  backgroundColor: 
                  chart.data.datasets[0].backgroundColor
              }
           },
           labelTextColor:function(tooltipItem, chart){
              return chart.data.datasets[0].borderColor;
           }
        }
     }
 }

You can run the preceding code in the Pages/BarChart8.html file.