Tooltips are not natively supported by table charts - https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#supported-charts
I thought about this when writing the table and someone wants me to try and do it in a project for work that they've been waiting ages for. They are old, but two articles that I thought may be useful are at https://groups.google.com/g/google-visualization-api/c/yc3DU997Dx0 and https://stackoverflow.com/questions/18735594/handling-a-hover-event-for-a-google-charts-table You can also give each cell in the table a class name - https://developers.google.com/chart/interactive/docs/gallery/table#data-format Just thinking out loud... Instead of changing the value, change the formatted text with what I wrote (f instead of v) - setFormattedValue - https://developers.google.com/chart/interactive/docs/reference#methods Give each cell a classname based on row and column number Use some sort of tooltip or popup code to retrieve the cell classname when hovered over Display the original value of cell in the tooltip/popup I'm not promising anything, but I'll try and take another look at this. On Friday, March 5, 2021 at 5:15:02 AM UTC-5 idan...@gmail.com wrote: > Hi, > > Thanks for your answer > > Can I make it that when click on the cell it will show all the text as > tooltip or other way ? > > ב-יום שישי, 5 במרץ 2021 בשעה 04:37:56 UTC+2, Ray Thomas כתב/ה: > >> Hi >> >> What you need to do is step through the datatable, test the length of the >> text in each cell, then change it if necessary. >> >> Here's an example: >> >> <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'); >> var query = new google.visualization.Query(' >> https://docs.google.com/spreadsheets/d/1tswaWUAbeBijHq4o505w0h7TmbD-qGhR3jBactcbGq0/gviz/tq?gid=1950745726&headers=1&tq=' >> >> + queryString); >> 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++) { >> var quote = quotes.getValue(i, j); >> if (quote.length >= maxLength) { >> quote = quote.slice(0,maxLength) + "..."; >> quotes.setValue(i,j,quote); >> } >> } >> } >> >> var chart = new >> google.visualization.Table(document.getElementById('quotes_div')); >> chart.draw(quotes); >> } >> })(); >> </script> >> >> You can see this working at http://brisray.com/google-charts/getset.htm >> and the original spreadsheet at >> https://docs.google.com/spreadsheets/d/1tswaWUAbeBijHq4o505w0h7TmbD-qGhR3jBactcbGq0/#gid=1950745726 >> >> Instead of .slice you can use .substring >> >> On Sunday, February 14, 2021 at 2:30:09 PM UTC-5 idan...@gmail.com wrote: >> >>> Hi, >>> >>> I am using dataTable to show data return from sql query >>> The columns are being created dynamaclly depend on the query >>> >>> for some column I can have long text inside column. >>> >>> I want to limit number of chars in columns to 50 chars for example and >>> if there is longer text it will appear with elipsis >>> >>> I saw some example but none was working >>> Can it be done and how ? >>> >>> Thanks >>> >>> -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/2ee66f50-58c0-4cb8-9e1a-7da7f9c7190bn%40googlegroups.com.
