In two-columns web UI layout, Remote Devices with long names are ellipsized but don't offer a tooltip to show the full name on hover

[nekohayo]

Feature description

Could you add a tooltip (ex: with the title="full machine name" HTML attribute, maybe?) for long machine names in the main dashboard's "Remote Devices" section? Otherwise, maybe a popover tooltip widget like the one you are using in the "Folders" column section.

Problem or use case

If you have a bunch of laptops and desktop computers named after their model and owner, you can have long names like this, especially in non-English languages:

• Ordinateur de bureau Dell Precision T1700 de Georges
• Ordinateur portable Apple MacBook M1 de Georges
• Ordinateur portable Apple MacBook Pro de Charles
• Téléphone Samsung blahblah de Cecil
• Tablette Lenovo A1 de Cunégonde

…etc.

It is impossible to properly visually identify them in the "Remote Devices" column section when the web browser's window width is above 1000 pixels wide, because unlike in English, some of the most important information is at the end of the string.

A tooltip on hover would easily solve this problem.

Alternatives or workarounds

Unfolding the machine's expander and clicking the Edit button to reveal the full name, but that is inconvenient.

[tomasz1986]

Related: #7592.

I think one problem with adding tooltips is that these are interactive elements, meaning that the tooltips will pop up even when you just want to press the element to unfold it. I personally find this extremely annoying. Just a side note, but for this reason I actually removed folder ID tooltips from my personal Syncthing build.

One possible solution could be to display tooltips only when the device name is actually too long. This would require some work though, as when it comes to tooltips, the GUI currently doesn't care whether the text fits or not, so without additional tweaks, it would just display the tooltips for all device names regardless of their length.

[nekohayo]

Indeed, ideally showing them only when a machine's name is ellipsized would make more sense than showing them in all situations.

I think one problem with adding tooltips is that these are interactive elements, meaning that the tooltips will pop up even when you just want to press the element to unfold it. I personally find this extremely annoying. Just a side note, but for this reason I actually removed folder ID tooltips from my personal Syncthing build.

Well, I consider the native HTML "title" attributes' tooltips to be pretty unobtrusive as they are click-through, and they don't appear until ~500ms after the mouse has stopped over an item, from what I can see in Firefox: they don't appear as long as the mouse is moving.

Syncthing's existing popover-style tooltip widgets (that can be seen over the "Folders" list column), in comparison, don't have this level of subtlety, they immediately and constantly appear in, regardless of active motion, which I agree can be intrusive. I wonder why standard "title" attributes were not used there.

[er-pa]

Alternatives would be to manually set a Device Name for each Syncthing instance, to something more manageable (shorter). In the end this will only have to be done once per Syncthing instance, quite doable. Or, less aesthetically pleasing but perhaps better than just clipping the names, to just not clip the names and expand the bar when neccesary.

Working with tooltips when it comes to an overview is still not very convenient, imo.

[tomasz1986]

Well, I consider the native HTML "title" attributes' tooltips to be pretty unobtrusive as they are click-through, and they don't appear until ~500ms after the mouse has stopped over an item, from what I can see in Firefox: they don't appear as long as the mouse is moving.

Bootstrap tooltips (which Syncthing uses) are better, because they can work with keyboard and touch screen input, while the standard HTML title attribute is basically limited to mouse hover only. That is also why nowadays using title is discouraged in general if you care about accessibility. However, tooltips on interactive elements are still problematic, as they are also not really accessible to touch screen users (as touching the element triggers both input and hover at the same time).

Honestly, as @er-pa above, as a simple workaround, at least for the time being, I would also suggest to just shorten your device names…