How do I define a different tooltip color per each serie on a line chart with google charts?

How do I define a different tooltip color per each serie on a line chart with google charts? I would like one to be green and the other one black but not sure how to associate the colors to the series.

<head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);


      function drawChart() {

        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Day');
        // it must follow data - tooltip - data tooltip
        data.addColumn('number', 'General');
        data.addColumn({type: 'string', role: 'tooltip'});
        data.addColumn('number', 'Filter');
        data.addColumn({type: 'string', role: 'tooltip'});
        data.addColumn({type: 'string', role: 'annotation'});


        data.addRows([
          [new Date(2016, 06, 16), 29.0, '29.0', 28.0, '28.0', ''],
          [new Date(2016, 07, 13), 12.2, '12.2', 10.2, '10.2', ''],
          [new Date(2016, 08, 10), 5.1, '5.1', 3.1, '3.1', ''],
          [new Date(2016, 09, 08), 4.9, '4.9', 4.0, '4.0', ''],
          [new Date(2016, 10, 05), 6.2, '6.2', 4.2, '4.2',  ''],
          [new Date(2016, 11, 03), 6.1, '6.1', 28.0, '28.0',  ''],
          [new Date(2016, 11, 31), 24.7, '24.7', 8.0, '8.0',  ''],
          [new Date(2017, 00, 28), 24.8, '24.8', 8.0, '8.0',  ''],
          [new Date(2017, 01, 25), 6.1, '6.1', 2.0, '2.0',  ''],
          [new Date(2017, 02, 25), 5.3, '5.3', 8.0, '8.0',  ''],
          [new Date(2017, 03, 22), 4.0, '4.0', 8.0, '8.0',  ''],
          [new Date(2017, 04, 20), 4.0, '4.0', 2.0, '2.0', '4.0']
        ]);

        var options = {
          legend: 'none',
          pointSize: 7,
          tooltip: {isHtml: true},  // CSS styling affects only HTML tooltips.

          chart: {
            title: '',
            subtitle: ''
          },
          width: 650,
          height: 230,
          chartArea: {'width': '92%', 'height': '88%'},
          hAxis: {
              format: 'M/d/yy',
              gridlines: {color: 'none'},
              ticks: [new Date(2016, 06, 16), new Date(2016, 07, 13), new Date(2016, 08, 10), new Date(2016, 09, 08), new Date(2016, 10, 05), new Date(2016, 11, 03), new Date(2016, 11, 31), new Date(2017, 00, 28), new Date(2017, 01, 25), new Date(2017, 02, 25), new Date(2017, 03, 22), new Date(2017, 04, 20), ],
              textStyle: {
              color: 'black',    // any HTML string color ('red', '#cc00cc')
              fontName: 'PT Sans', // i.e. 'Times New Roman'
              fontSize: 10 // 12, 18 whatever you want (don't specify px)
              }
            },
          vAxis: {
            format: 'decimal',
            gridlines: {color: 'none'},
            ticks: [0,5,10,15,20,25,30],
            textStyle: {
              color: 'black',    // any HTML string color ('red', '#cc00cc')
              fontName: 'PT Sans', // i.e. 'Times New Roman'
              fontSize: 10 // 12, 18 whatever you want (don't specify px)
              },
            minValue: 0
            },
            colors: ['#000000','#39b54a']
        };


        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    }
    </script>
  </head>
  <body>
    <style>
      div.google-visualization-tooltip { background: #000; font-family: 'PT Sans', sans-serif!important; text-align: center!important; padding: 0px!important; }
      div.google-visualization-tooltip > ul > li > span {color: #FFF!important; font-size: 12px!important; text-align: right!important; margin: 0px!important; }
    </style>
    <div id="chart_div" style="width: 650px; height: 230px;"></div>
  </body>
</html>

Solution

to use html / css styling on the tooltips, two things must be in place...

first, the chart option, which you have...

tooltip: {isHtml: true}

also need to set html property on the tooltip column...

data.addColumn({type: 'string', role: 'tooltip', p: {html: true}});

then you can use html for the tooltip column values...

see following working snippet...

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

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Day');
  data.addColumn('number', 'General');
  data.addColumn({type: 'string', role: 'tooltip', p: {html: true}});
  data.addColumn('number', 'Filter');
  data.addColumn({type: 'string', role: 'tooltip', p: {html: true}});
  data.addColumn({type: 'string', role: 'annotation'});

  data.addRows([
    [new Date(2016, 06, 16), 29.0, '<div class="general">29.0</div>', 28.0, '<div class="filter">28.0</div>', null],
    [new Date(2016, 07, 13), 12.2, '<div class="general">12.2</div>', 10.2, '<div class="filter">10.2</div>', null],
    [new Date(2016, 08, 10), 5.1, '<div class="general">5.1</div>', 3.1, '<div class="filter">3.1</div>', null],
    [new Date(2016, 09, 08), 4.9, '<div class="general">4.9</div>', 4.0, '<div class="filter">4.0</div>', null],
    [new Date(2016, 10, 05), 6.2, '<div class="general">6.2</div>', 4.2, '<div class="filter">4.2</div>',  null],
    [new Date(2016, 11, 03), 6.1, '<div class="general">6.1</div>', 28.0, '<div class="filter">28.0</div>',  null],
    [new Date(2016, 11, 31), 24.7, '<div class="general">24.7</div>', 8.0, '<div class="filter">8.0</div>',  null],
    [new Date(2017, 00, 28), 24.8, '<div class="general">24.8</div>', 8.0, '<div class="filter">8.0</div>',  null],
    [new Date(2017, 01, 25), 6.1, '<div class="general">6.1</div>', 2.0, '<div class="filter">2.0</div>',  null],
    [new Date(2017, 02, 25), 5.3, '<div class="general">5.3</div>', 8.0, '<div class="filter">8.0</div>',  null],
    [new Date(2017, 03, 22), 4.0, '<div class="general">4.0</div>', 8.0, '<div class="filter">8.0</div>',  null],
    [new Date(2017, 04, 20), 4.0, '<div class="general">4.0</div>', 2.0, '<div class="filter">2.0</div>', '4.0']
  ]);

  var options = {
    legend: 'none',
    pointSize: 7,
    tooltip: {isHtml: true},
    chart: {
      title: '',
      subtitle: ''
    },
    width: 650,
    height: 230,
    chartArea: {width: '92%', height: '88%'},
    hAxis: {
      format: 'M/d/yy',
      gridlines: {color: 'none'},
      ticks: [new Date(2016, 06, 16), new Date(2016, 07, 13), new Date(2016, 08, 10), new Date(2016, 09, 08), new Date(2016, 10, 05), new Date(2016, 11, 03), new Date(2016, 11, 31), new Date(2017, 00, 28), new Date(2017, 01, 25), new Date(2017, 02, 25), new Date(2017, 03, 22), new Date(2017, 04, 20), ],
      textStyle: {
        color: 'black',
        fontName: 'PT Sans',
        fontSize: 10
      }
    },
    vAxis: {
      format: 'decimal',
      gridlines: {color: 'none'},
      ticks: [0,5,10,15,20,25,30],
      textStyle: {
        color: 'black',
        fontName: 'PT Sans',
        fontSize: 10
      },
      minValue: 0
    },
    colors: ['#000000', '#39b54a']
  };

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

.general {
  background-color: #000000;
  color: #ffffff;
  padding: 4px;
}

.filter {
  background-color: #39b54a;
  color: #ffffff;
  padding: 4px;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>