What I came up could probably be simplified. It seems a lot of work to extract the row and column numbers from the class names I gave to the cells.
<script type="text/javascript">
var longText = (function() {
google.charts.load('current', {'packages':['table']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var queryString = encodeURIComponent('SELECT A,B,C ORDER BY A');
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var quotes = response.getDataTable();
var totalRows = quotes.getNumberOfRows();
var totalCols = quotes.getNumberOfColumns();
var maxLength = 50;
for (i = 0; i < totalRows; i++) {
for (j = 1; j < totalCols; j++) {
quotes.setFormattedValue(i,j,quote);
}
// Set the cell's classname
quotes.setProperty(i,j,"className","r"+i+"c"+j);
}
}
var classNames = {};
var options = {'cssClassNames': classNames};
chart.draw(quotes, options);
// Add event listeners for the table. Need mouseover and mouseout
let tableClass = document.getElementsByClassName("google-visualization-table");
tableClass[0].addEventListener("mouseover", function( event ) {
var cellClass = event.target.className;
// cellClass is two texts, what we added and what Google puts in there
var startLetter = cellClass.charAt(0);
if (startLetter == "r") {
// We just need what we put in the cell class
cellClass = cellClass.split(" ")[0];
// cellClass is going to be an r followed by some numbers, then a c followed by some more numbers, need to extract the row and column numbers
// Split cellClass at c
splitClass = cellClass.split("c");
var rownum = parseInt(splitClass[0].slice(1));
var colnum = parseInt(splitClass[1]);
var longText = quotes.getValue(rownum,colnum);
document.getElementById("popup_div").innerHTML = "<p>" + longText + "</p>";
document.getElementById("popup_div").style.display = "inline-block";
}
}, false);
tableClass[0].addEventListener("mouseout", function( event ) {
document.getElementById("popup_div").innerHTML = "";
document.getElementById("popup_div").style.display = "none";
}, false);
}
})();
The Google Sheet used is the same as the last example.