Tooltip doesn't show in Google Scatter Chart

by shakedk

HTML

<div id="chart"></div>

CSS

#chart {
    width: 900px;
    height: 500px;
}

JavaScript

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

      function drawChart () {

        var data = new google.visualization.DataTable();        

        data.addColumn('number', 'Year');        
        data.addColumn('number', 'Sales');
        // A column for colors
        data.addColumn({ type: 'string', role: 'style' });

        
     data.addRows([
[1,100, 'point {size: 14; fill-color: green'],


      ]);

        var options = {
          width: 800,
          height: 500,
          chart: {
            title: 'Example',            
          },
        };

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

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

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'ID');
    data.addColumn('number', 'Value');
    data.addColumn( {'type': 'string', 'role': 'style'} );
    data.addRows([[1,100, 'point {size: 14; fill-color: green'], 
                  [2,150, 'point {size: 14; fill-color: red}'], 
                  [3,200, 'point {size: 14; fill-color: green'], 
                  [4,250, 'point {size: 14; fill-color: green'], 
                  [5,300, 'point {size: 14; fill-color: green'], 
                  [6,350, 'point {size: 14; fill-color: green'],
                  [7,400, 'point {size: 14; fill-color: green'], 
                  [8,450, 'point {size: 14; fill-color: red']
                 ]);
    
    var options = {
    }
    
    var chart = new google.visualization.ScatterChart(document.getElementById('chart'));
    chart.draw(data, options);
}

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