Xojo2025R1: WebListBox with DataSource tooltip issue

Targets Web
1

The WebApp is using CSS, the overflowing text in the cells of the WebListBox is showing ellipses.
When using Safari the truncated text will show in the tooltip when hovering mouse over the cell, this is good.

However, using Edge or FireFox browsers is a challenge.

I have created method that applies java script to set cell.title as follows:

Var js As String 

js = "setTimeout(function() {"
js = js + "var cells = document.querySelectorAll('#" + ListBox.ControlID + " td');"
js = js + "cells.forEach(function(cell) {"
js = js + "if (cell.offsetWidth < cell.scrollWidth) { cell.title = cell.textContent; }"
js = js + "});"
js = js + "}, 300);"
ListBox.ExecuteJavaScript(js)

This appears to be somewhat working on one page but not on the other.
The complication I have is that I also use Thread and Timer controls in addition to DataSource.

It appears that I have the timing issue when applying javascript hence the tooltip is not showing the text as expected some of the time.

Is there a better or alternative way of showing truncated text in tooltip that works for all (or most popular) browsers?

2

I have modified the java script as below and this seems to be working just fine now:

js  = "$('#" + ListBox.ControlID + "').on('draw.dt', function () {"
js = js + "document.querySelectorAll('#" + ListBox.ControlID + " td ').forEach(td => {"
js = js + "td.title = td.textContent.trim();"
js = js + "});"
js = js + "});"
1 Like