Our main application menu is a TreeGrid with multiple levels and long screen names:
I can do a setTooltipGenerator and set the tooltip == the text itself, but that becomes annoying really fast; You hover over anything for 0.5s and then you get a tooltip that overlaps the line below where you’re pointing “forever”.
Googling I found this:
It seems, if I could generate an “onmouseenter=xxx” on the internal <td>'s I should be able tyo do this, but is that possible? Or even the right approach?
To detect when the contents of an element overflow, you either need JavaScript (ResizeObserver essentially), or you limit support to browser that support scroll container queries: CSS scroll-state() | Blog | Chrome for Developers
With scroll container queries, you’d still need some additional JS to enable/disable the tooltip, as I believe there’s no way to configure the <vaadin-tooltip> element with CSS.
I forgot about <vaadin-tooltip>. I was thinking of using plain old title.
The Stackoverflow examples set an onmouseenter handler that does:
function setTitleIfNecessary() {
if(this.offsetWidth < this.scrollWidth) {
this.setAttribute('title', this.innerHTML);
}
}
( and presumably an onmouseleave to clear title )
After that, the browser will do it’s regular tooltip thing.
When I manually set <td title=“xxxxx”> on a Grid cell with DevTools it works fine, but I assume there is no Vaadin API for setting event handlers and attributes on the internal <table>
I assume there is no Vaadin API for setting event handlers and attributes on the internal
<table>
The <vaadin-grid-cell-content> elements are in the light DOM, which are the ones that clip/truncate the text content.
You could add a mousemove listener on the Grid element, those events will bubble up from the cell content elements, and you could check the dimensions there and set the title attribute appropriately. Probably not the best performance, as the mousemove event is going to be triggered constantly.