Add Information To Google Timeline Bar Hover

I'm trying to add three new sections to the hover pop-up on a bar in google timeline charts. I have tried using the google timeline help but cannot find a solution The default is T

Solution 1:

you can add your own custom tooltip, see Customizing tooltips in the Timeline reference

the tooltip column will just be a string, either a simple value or html

see following working snippet, here, a DataView is used to add the tooltip column. this allows the tooltip to be built dynamically based on the data in the data table

also, the arena is added to the original data table, for easy reference, but is excluded from the data view...

google.charts.load('current', {
  packages: ['timeline']
}).then(function () {
  var container = document.getElementById('example5.1');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn({ type: 'string', id: 'Federation' });
  dataTable.addColumn({ type: 'string', id: 'Event' });
  dataTable.addColumn({ type: 'date', id: 'Start' });
  dataTable.addColumn({ type: 'date', id: 'End' });
  dataTable.addColumn({ type: 'string', id: 'Arena' });
  dataTable.addRows([
    ['WWE / NXT', 'AXXESS', newDate(0,0,0,18,0,0), newDate(0,0,0,22,0,0), 'Arena A'],
    ['WWN', 'Matt Riddles Bloodsport', newDate(0,0,0,15,0,0), newDate(0,0,0,18,0,0), 'Arena B'],
    ['WrestleCon', 'Wildkat Sports', newDate(0,0,0,18,0,0), newDate(0,0,0,21,0,0), 'Arena C'],
    ['WWN', 'Evolve', newDate(0,0,0,20,00,0), newDate(0,0,0,23,0,0), 'Arena D'],
    ['WrestleCon', 'WrestleCon Supershow', newDate(0,0,0,21,30,0), newDate(0,0,0,23,30,0), 'Arena E'],
    ['Knockout', 'Knockout in NOLA', newDate(0,0,0,17,00,0), newDate(0,0,0,20,00,0), 'Arena F'],
    ['ROH', 'RoH Supercard of Honor', newDate(0,0,0,19,30,0), newDate(0,0,0,22,30,0), 'Arena G'],
    ['WWN', 'Beyond Wrestling', newDate(0,0,0,20,55,0), newDate(0,0,0,23,55,0), 'Arena H']]);
  var options = {
    timeline: { colorByRowLabel: true },
    tooltip: {isHtml: true},
    legend: 'none',
    backgroundColor: '#ffd'
  };

  var formatTime = new google.visualization.DateFormat({
    pattern: 'HH:mm:ss a'
  });

  var view = new google.visualization.DataView(dataTable);
  view.setColumns([0, 1, {
    role: 'tooltip',
    type: 'string',
    calc: function (dt, row) {
      // build tooltipvar dateBegin = dt.getValue(row, 2);
      var dateEnd = dt.getValue(row, 3);
      var oneHour = (60 * 60 * 1000);
      var duration = (dateEnd.getTime() - dateBegin.getTime()) / oneHour;

      var tooltip = '<div><div class="ggl-tooltip"><span>';
      tooltip += dt.getValue(row, 0) + ':</span>&nbsp;' + dt.getValue(row, 1) + '</div>';
      tooltip += '<div class="ggl-tooltip"><div>' + formatTime.formatValue(dateBegin) + ' - ';
      tooltip += formatTime.formatValue(dateEnd) + '</div>';
      tooltip += '<div><span>Duration: </span>' + duration.toFixed(0) + ' hours</div></div>';
      tooltip += '<div class="ggl-tooltip"><span>Arena: </span>' + dt.getValue(row, 4) + '</div></div>';

      return tooltip;
    },
    p: {html: true}
  }, 2, 3]);

  chart.draw(view.toDataTable(), options);  // <-- use data view to draw chart
});

.ggl-tooltip {
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  font-family: Arial, Helvetica;
  font-size: 14px;
  padding: 8px;
}

.ggl-tooltipspan {
  font-weight: bold;
}

<scripttype="text/javascript"src="https://www.gstatic.com/charts/loader.js"></script><divid="example5.1"></div>