title: Chart.js 2.0: How to change title of tooltip
body: <p>Forgive me for my sometimes poor English. Dutch is my native language.</p>
  
  <p>I've created a Chart.js linechart which shows me my energy usage reported by my main power smart meter. I got it almost working like the way I want, but there is one thing I can't manage to get it to work in a way I want because I don't understand a little thing.</p>
  
  <p>With some help of the user "iecs" at the topic <a href="https://stackoverflow.com/a/34855201/6660135">"Chart.js V2: Add prefix or suffix to tooltip label"</a> I was able to change the label at the tooltip. It now shows nicely my desired prefix and suffix:</p>
  
  <pre><code>tooltips: {
      enabled: true,
      mode: 'single',
      backgroundColor: 'rgba(0,0,0,0.9)',
      titleFontSize: 14,
      titleFontStyle: 'bold',
      titleFontColor: "#FFF",
      bodyFontSize: 12,
      bodyFontStyle: 'normal',
      bodyFontColor: "#FFF",
      footerFontSize: 12,
      footerFontStyle: 'normal',
      footerFontColor: "#FFF",
      cornerRadius: 5,
      callbacks: {
          label: function(tooltipItems, data) { // Solution found on https://stackoverflow.com/a/34855201/6660135
              //Return value for label
              return 'Usage: ' + tooltipItems.yLabel*1000 + ' watt';
          }
      }
  }
  </code></pre>
  
  <p>When I try to add exactly the same code to modify the title I got <code>undefined</code> at the place where a date and time should be displayed:</p>
  
  <pre><code>tooltips: {
      enabled: true,
      mode: 'single',
      backgroundColor: 'rgba(0,0,0,0.9)',
      titleFontSize: 14,
      titleFontStyle: 'bold',
      titleFontColor: "#FFF",
      bodyFontSize: 12,
      bodyFontStyle: 'normal',
      bodyFontColor: "#FFF",
      footerFontSize: 12,
      footerFontStyle: 'normal',
      footerFontColor: "#FFF",
      cornerRadius: 5,
      callbacks: {
          title: function(tooltipItems, data) {
              //Return value for title
              return 'Date: ' + tooltipItems.xLabel + ' GMT+2';
          },
          label: function(tooltipItems, data) { // Solution found on https://stackoverflow.com/a/34855201/6660135
              //Return value for label
              return 'Usage: ' + tooltipItems.yLabel*1000 + ' watt';
      }
  }
  </code></pre>
  
  <p>With the answer of user "Lukman" at the topic <a href="https://stackoverflow.com/a/1625271/6660135">"Print content of JavaScript object? [duplicate]"</a> I discovered that I can display the content of the "tooltipItems object":</p>
  
  <pre><code>alert(tooltipItems.toSource())
  </code></pre>
  
  <p>This displayed an interesting difference regarding the "tooltipItems" object between the "title" and the "label".</p>
  
  <p>The "tooltipItems" object at the "label" display this as content:</p>
  
  <pre><code>({xLabel:"2016-08-07 23:41:57", yLabel:0.261, index:70, datasetIndex:0})
  </code></pre>
  
  <p>While the "tooltipItems" object at the "title" displays this as content:</p>
  
  <pre><code>[{xLabel:"2016-08-07 23:41:57", yLabel:0.261, index:70, datasetIndex:0}]
  </code></pre>
  
  <p>The beginning characters and ending characters are different.
  The one of "label" can be read with <code>tooltipItems.yLabel</code> but the one of "title" can't be read with <code>tooltipItems.xLabel</code> because it shows me "undefined". The whole title will now be <code>Date: undefined GMT+2</code> insteas of <code>Date: 2016-08-07 23:41:57 GMT+2</code></p>
  
  <p>What did I mis? Can someone explain me the differences between the 2 outputs of the object contents of "tooltipItems" and how to read the "xLabel" and "yLabel" indexes?</p>