How to show two different tooltips in google chart

问题

I want to trigger to different tooltips on a single column chart, one on hover and another on bar select.

How can i solve it ?

I went through the following links but couldn't solve it.

Show multiple tooltips in Google Charts

Google charts to show multiple tooltip

How to show/hide google chart's tooltip programatically?

ToolTip only shows on "Click"- google charts

回答1:

out of the box, google chart does not offer this functionality.

you will need to turn off the default tooltips,

tooltip: {
  trigger: 'none'
}

and add your own custom tooltips.
you can use chart events to determine which tooltip to show.
('select', 'onmouseover', 'onmouseout')

to position your custom tooltip,
you can use chart method --> getChartLayoutInterface
the interface has a method for --> getBoundingBox
which returns the position of a chart element,
just pass the id of the element, such as a chart column.

chart column id's take the form as --> bar#0#0
where the first 0 is the series number,
and the second 0 is the row number.

something to think about is how to handle collisions.
meaning, what are you going to show when a column is selected, then hovered.
or a column is selected and another column is hovered, etc...

see following working snippet for an example of how to accomplish...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['City', '2010 Population',],
    ['New York City, NY', 8175000],
    ['Los Angeles, CA', 3792000],
    ['Chicago, IL', 2695000],
    ['Houston, TX', 2099000],
    ['Philadelphia, PA', 1526000]
  ]);

  var options = {
    title: 'Population of Largest U.S. Cities',
    chartArea: {width: '50%'},
    hAxis: {
      title: 'Total Population',
      minValue: 0
    },
    vAxis: {
      title: 'City'
    },
    tooltip: {
      trigger: 'none'
    }
  };

  var chart = new google.visualization.ColumnChart($('#chart_div').get(0));
  var chartLayout;
  var selection;

  google.visualization.events.addListener(chart, 'ready', function () {
    chartLayout = chart.getChartLayoutInterface();
  });

  google.visualization.events.addListener(chart, 'select', function () {
    selection = getSelection();
    if (selection.row !== null) {
      hideTooltip('tooltip-hover');
      showTooltip(selection, 'tooltip-select');
    } else {
      hideTooltip('tooltip-select');
    }
  });

  google.visualization.events.addListener(chart, 'onmouseover', function (sender) {
    selection = getSelection();
    if ((sender.row !== null) && (selection.row !== sender.row)) {
      showTooltip(sender, 'tooltip-hover');
    }
  });

  google.visualization.events.addListener(chart, 'onmouseout', function (sender) {
    selection = getSelection();
    if ((sender.row !== null) && (selection.row !== sender.row)) {
      hideTooltip('tooltip-hover');
    }
  });

  function showTooltip(sender, tooltip) {
    // get position of bar
    var tooltipBounds = chartLayout.getBoundingBox('bar#' + (sender.column - 1) + '#' + sender.row);

    // set values
    $('#' + tooltip + ' .series-name').html(data.getColumnLabel(sender.column));
    $('#' + tooltip + ' .series-x').html(data.getFormattedValue(sender.row, 0));
    $('#' + tooltip + ' .series-y').html(data.getFormattedValue(sender.row, sender.column));

    // set position
    $('#' + tooltip).css({
      left: tooltipBounds.left + 'px',
      top: (tooltipBounds.top - $('#' + tooltip).outerHeight(true)) + 'px'
    });

    // show
    $('#' + tooltip).addClass('shown');
    $('#' + tooltip).removeClass('hidden');
  }

  function hideTooltip(tooltip) {
    // hide
    $('#' + tooltip).addClass('hidden');
    $('#' + tooltip).removeClass('shown');
  }

  function getSelection() {
    selection = chart.getSelection();
    if (selection.length > 0) {
      return selection[0];
    } else {
      return {row: null, column: null};
    }
  }

  chart.draw(data, options);
});

.ggl-tooltip {
  background-color: #ffffff;
  border: 1px solid #E0E0E0;
  font-size: 10pt;
  padding: 8px 8px 8px 8px;
  position: absolute;
}

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

.bold {
  font-weight: bold;
}

.hidden {
  display: none;
  visibility: hidden;
}

.shown {
  display: inline-block;
}

#tooltip-hover {
  color: blue;
}

#tooltip-select {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src='https://www.gstatic.com/charts/loader.js'></script>
<div id="chart_div"></div>
<div id="tooltip-hover" class="ggl-tooltip hidden">
  <div><span class="series-name bold"></span></div>
  <div>
    <span class="series-x bold"></span>:
    <span class="series-y"></span>
  </div>
</div>
<div id="tooltip-select" class="ggl-tooltip hidden">
  <div><span class="series-name bold"></span></div>
  <div>
    <span class="series-x bold"></span>:
    <span class="series-y"></span>
  </div>
</div>

来源：https://stackoverflow.com/questions/56964861/how-to-show-two-different-tooltips-in-google-chart