Google Charts - How to add text to a standard tooltip

Question

I want to add a custom tooltip to my charts, using the default, and for example, just add text to it.

Is this possible, or do I need to create it myself using html?

data= google.visualization.arrayToDataTable([
        ["Element", "Duration ", { role: "style" }, { role: 'tooltip' }],
        ["Count", 23515, "orange", ???],
      ]);   

Like this (default tooltip):

How I want it:

Add duration as readable time, but still keep the default prompt

Answer 1

unable to add content to default tooltip using standard functionality

this requires manipulating the tooltip directly when it is displayed

'onmouseover'
( )
#,

, (font-size)

google.charts.load('current', {
  callback: function () {
    var dataTable = new google.visualization.DataTable({
      cols: [
        {label: 'Element', type: 'string'},
        {label: 'Duration', type: 'number'},
        {role: 'style', type: 'string'}
      ],
      rows: [
        {c:[{v: 'Amazon Elastic Transcoder'}, {v: 3116, f: '3,116 s'}, {v: 'orange'}]},
        {c:[{v: 'Amazon Elastic Transcoder'}, {v: 8523, f: '8,523 s'}, {v: 'cyan'}]}
      ]
    });

    var options = {
      backgroundColor: 'transparent',
      legend: 'none',
      theme: 'maximized',
      hAxis: {
        textPosition: 'none'
      },
      tooltip: {
        isHtml: true
      }
    };

    var container = document.getElementById('chart_div');
    var chart = new google.visualization.ColumnChart(container);

    google.visualization.events.addListener(chart, 'onmouseover', function (props) {
      var duration = dataTable.getValue(props.row, 1);
      var hours = parseInt( duration / 3600 ) % 24;
      var minutes = parseInt( duration / 60 ) % 60;
      var seconds = duration % 60;

      var tooltip = container.getElementsByTagName('ul');
      var tooltipLabel = container.getElementsByTagName('span');
      if (tooltip.length > 0) {
        // increase tooltip height
        tooltip[0].parentNode.style.height = '95px';

        // add new li element
        var newLine = tooltip[0].appendChild(document.createElement('li'));
        newLine.className = 'google-visualization-tooltip-item';

        // add span for label
        var lineLabel = newLine.appendChild(document.createElement('span'));
        lineLabel.style.fontFamily = tooltipLabel[0].style.fontFamily;
        lineLabel.style.fontSize = tooltipLabel[0].style.fontSize;
        lineLabel.style.color = tooltipLabel[0].style.color;
        lineLabel.style.margin = tooltipLabel[0].style.margin;
        lineLabel.style.textDecoration = tooltipLabel[0].style.textDecoration;
        lineLabel.innerHTML = dataTable.getColumnLabel(1) + ': ';

        // add span for value
        var lineValue = newLine.appendChild(document.createElement('span'));
        lineValue.style.fontFamily = tooltipLabel[0].style.fontFamily;
        lineValue.style.fontSize = tooltipLabel[0].style.fontSize;
        lineValue.style.fontWeight = tooltipLabel[0].style.fontWeight;
        lineValue.style.color = tooltipLabel[0].style.color;
        lineValue.style.margin = tooltipLabel[0].style.margin;
        lineValue.style.textDecoration = tooltipLabel[0].style.textDecoration;
        lineValue.innerHTML = hours + 'h ' + minutes + 'm ' + seconds + 's';
      }
    });

    chart.draw(dataTable, options);
  },
  packages:['corechart']
});

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

Hide result

,

html-

html, .

html

{role: 'tooltip', type: 'string', p: {html: true}}

next, need tooltip.isHtml: true

​​ ,
, ...

google.charts.load('current', {
  callback: function () {
    var dataTable = new google.visualization.DataTable({
      cols: [
        {label: 'Element', type: 'string'},
        {label: 'Duration', type: 'number'},
        {role: 'style', type: 'string'}
      ],
      rows: [
        {c:[{v: 'Amazon Elastic Transcoder'}, {v: 3116, f: '3,116 s'}, {v: 'orange'}]},
        {c:[{v: 'Amazon Elastic Transcoder'}, {v: 8523, f: '8,523 s'}, {v: 'cyan'}]}
      ]
    });

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

    for (var i = 0; i < dataTable.getNumberOfRows(); i++) {
      var duration = dataTable.getValue(i, 1);
      var hours = parseInt( duration / 3600 ) % 24;
      var minutes = parseInt( duration / 60 ) % 60;
      var seconds = duration % 60;

      var tooltip = '<div class="ggl-tooltip"><span>' +
        dataTable.getValue(i, 0) + '</span><div>' +
        dataTable.getColumnLabel(1) + ': <span>' +
        dataTable.getFormattedValue(i, 1) + '</span></div><div>' +
        dataTable.getColumnLabel(1) + ': <span>' +
        hours + 'h ' + minutes + 'm ' + seconds + 's</span></div></div>';

      dataTable.setValue(i, 3, tooltip);
    }

    var options = {
      backgroundColor: 'transparent',
      legend: 'none',
      theme: 'maximized',
      hAxis: {
        textPosition: 'none'
      },
      tooltip: {
        //trigger: 'selection',
        isHtml: true
      }
    };

    var container = document.getElementById('chart_div');
    var chart = new google.visualization.ColumnChart(container);
    chart.draw(dataTable, options);
  },
  packages:['corechart']
});

.ggl-tooltip {
  border: 1px solid #E0E0E0;
  font-family: Arial, Helvetica;
  font-size: 10pt;
  padding: 12px 12px 12px 12px;
}

.ggl-tooltip div {
  padding-top: 6px;
}

.ggl-tooltip span {
  font-weight: bold;
}

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

Hide result