Google Charts API

Tables: Tooltips & Popups

Introduction

Wouldn't it be nice to have a tootip or popup when a table cell is hovered over? As standard, the entire row is highlighted when any cell in the row is hovered over but tooltips are not natively supported in table charts.

This page is an investigation in how to create tooltips and popup overlays when a table cell is hovered over, something that has been asked about both in the API user-supported group and on Stack Overflow.

The question recently came up again in another post in the API user-supported group and so this page was created.

Example: Modal Long Text

This example was prompted by idan in the Google Visualization API Group who wanted to limit the number of characters in a cell. The data comes from a Google Sheet. Not surprisingly, the ability to show the longer text when the cell was hovered over was also asked for.

Example: Tooltip Long Text

Another way of displaying the long text information is to create a faux tooltip. The long text will appear somewhere near the mouse pointer. This is done by using MouseEvent.pageX, MouseEvent.pageY. The x and y values of the mouse can be relative to any part of the screen or container if needed.

 

 

 

This page created March 6, 2021; last modified March 8, 2021