Tooltip that only displays when the element is ellipsized

[PVince81]

In the file list for example, in responsive mode, it can happen that text becomes truncated/ellipsized (uk-text-truncate).

In such cases it is desirable to add a tooltip so that the user can see the full text.
An alternative approach would be to display the text with a "position:absolute".

It is possible to detect whether an element is ellipsized by checking if el.scrollWidth > el.clientWidth is true.

Approach 1:

When using UIkit tooltips, this would require calling UIkit.tooltip() directly to be able to set up the "beforeshow" event handler to prevent displaying in case the element is not ellipsized. As far as I saw we should not call UIkit directly in Phoenix, so it would be preferable to have this behavior as a directive.

Approach 2:

Detect window resizes (using resize-observer vue component) and then rerun the ellipsis detection for the affected item. Store the "is it ellipsized" flag in the state and render the :uk-tooltip value only if ellipsized.
This worked locally for me but I'm worried about potential performance issues when many items are present on the page, considering that scrollWidth and clientWidth might trigger expensive measurements by the browser's layout engine.

Approach 3:

Like approach 2, but detect the ellipsized state only when the mouse enters the element.
I tried this before but the element was too narrow, so the tooltip did not appear the first time it was hovered. However it appeared the second time.

Ideal would be to have the desired behavior as a Vue-js directive which internally uses UIkit.tooltip(), or even wrap UIkit.tooltip() or write our own tooltip toolset, which should happen anyway if moving away from UIkit.

Thoughts ? @LukasHirt @kulmann

[LukasHirt]

What about using computed prop to pass down the tooltip and return null if the el.scrollWidth > el.clientWidth condition is true? Would that work/be any good?

[PVince81]

@LukasHirt what you proposed is approach 2. However I don't think the computed property will be watching the state of "el", this is why in my solution I used another trigger (resize observer) to recompute the flag after a resize.

I haven't tried whether Vue JS is also reactive with plain DOM element attribute changes.