Google Charts area chart custom tooltip not working as expected

Question

I'm trying to add tooltips to a Google Area Chart, but I'm getting unexpected behavior. I took the Area Chart JSFiddle example and modified it to add a custom tooltip as described here. My content looks like this:

  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses', { type: 'string', role: 'tooltip'}],
      ['2013',  1000,      400, 'wtf'],
      ['2014',  1170,      460, 'hithere'],
      ['2015',  660,       1120, 'doh'],
      ['2016',  1030,      540, 'moohaha']
    ]);

    var options = {
      title: 'Company Performance',
      hAxis: {title: 'Year',  titleTextStyle: {color: '#333'}},
      vAxis: {minValue: 0},
      focusTarget: 'category'
    };

    var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }

JSFiddle here: https://jsfiddle.net/accelerate/y18tb8eq/

Rather than replacing the entire tooltip content, like I expected, the 'expenses' line in the tooltip gets replaced with my tooltip data. For example, the tooltip for the first set of data looks like:

2013
Sales: 1,000
Expenses: wtf

Can someone explain to me what I'm doing wrong?

Answer 1

I figured it out. Which column the tooltip is in matters. I needed to put the tooltip column immediately after the first column. So my header column has to look like this:

['Year',  { type: 'string', role: 'tooltip'}, 'Sales', 'Expenses']