Google Bar Chart custom tooltip does not work

Question

This code:

chart = new google.charts.Bar(document.getElementById('chart'));
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string', '');
dataTable.addColumn('number', 'Value');
dataTable.addColumn({type: 'string', role: 'tooltip', p: {'html': true}});
var rows = [
    ['U.S.', 2, "tool"],
    ['France', 10, "tip"]
];
dataTable.addRows(rows);
chart.draw(dataTable);

does not result in a custom tooltip.

Strangely it works with other chart types.

Do you know why please?

[edit] Apparently this is not possible. Is there any other way to put a "%" symbol in the tooltip, like in this screenshot?

Answer 1

The tooltip should show the formatted value by default.
Using object notation for your values, you can provide a formatted value (f:)
along with the required value (v:)...

you can also use dataTable.setFormattedValue(...) after the table is loaded...

Example...

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

function drawChart() {
  chart = new google.charts.Bar(document.getElementById('chart'));
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn('string', '');
  dataTable.addColumn('number', 'Value');
  var rows = [
      ['U.S.', {v: 2, f: '2%'}],    // add %
      ['France', {v: 10, f: '10%'}],  // add %
      ['Germany', {v: 15, f: 'whatever we want'}]   // add whatever we want 
  ];
  dataTable.addRows(rows);
  chart.draw(dataTable);
}

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