Tooltip and annotation both in google chart

Question

can we use tool-tip and annotations both in same chart in google bar chart? please share your experiences. thanks

            annotations: {
                 textStyle: {
                     color: 'black',
                     fontSize: 11,
                     fontWeight: 'bold',
                     format: 'short',
                 },
                 alwaysOutside: true
            },
            tooltip: {
                isHtml: true,
                trigger: 'selection'
            },

Answer 1

yes, you can use both tooltips and annotations in same chart

to do so, you use both annotation & tooltip column roles

in the data table, or data view, add the role after each data column it represents

data table

X, Y, annotation role, tooltip role  

in the following example, a data view is used, so the tooltip can be built dynamically

in order to have html tooltips, two things must by in place.

the chart options must include...

    tooltip: {
      isHtml: true
    }

and the column role must include a property...

    p: {html: true}

however, there is a bug in google charts,
column properties are ignored when using a data view,
so we convert the data view to a data table when drawing...

  chart.draw(view.toDataTable(), options);  // <-- convert to data table

see following working snippet...

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ["Element", "Density"],
    ["Copper", 8.94],
    ["Silver", 10.49],
    ["Gold", 19.30],
    ["Platinum", 21.45]
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, {
    type: 'string',
    role: 'annotation',
    sourceColumn: 1,
    calc: 'stringify'
  }, {
    type: 'string',
    role: 'tooltip',
    calc: function (dt, row) {
      return '<div class="ggl-tooltip"><div><span>' + dt.getValue(row, 0) + '</span></div><div>' + dt.getColumnLabel(1) + ':&nbsp;&nbsp;<span>' + dt.getValue(row, 1) + '</span></div>';
    },
    p: {html: true}
  }]);

  var options = {
    annotations: {
      textStyle: {
        color: 'black',
        fontSize: 11,
        fontWeight: 'bold',
      },
      alwaysOutside: true
    },
    tooltip: {
      isHtml: true,
      trigger: 'selection'
    }
  };

  var chart = new google.visualization.BarChart(document.getElementById('chart'));
  chart.draw(view.toDataTable(), options);
});

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

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

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

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