Add option to display tooltip on link hover

[Johennes]

This makes it possible for platforms like Electron apps, which lack a built-in URL preview in the status bar, to enable tooltip previews of links.

This will require a corresponding change in element-web to override needsUrlTooltips in ElectronPlatform. For testing in a browser, you can change the default value in BasePlatform.

One problem I wasn't able to fix yet is that when clicking a link and returning, the tooltip persists. Disabling the tooltip on focus fixes this but probably breaks accessibility. Curious if anyone has ideas on what to do here.

For element-hq/element-web#22286
Relates to element-hq/element-web#6532
Closes element-hq/element-web#21907

---

Here's what your changelog entry will look like:

✨ Features

• Add option to display tooltip on link hover (#8394). Fixes Show the target of a link, when you hover over it. element-hq/element-web#21907. Contributed by @Johennes.

Preview: https://pr8394--matrix-react-sdk.netlify.app
⚠️ Do you trust the author of this PR? Maybe this build will steal your keys or give you malware. Exercise caution. Use test accounts.

[codecov]

Codecov Report

Merging #8394 (cf07f54) into develop (bb4064f) will decrease coverage by 0.00%.
The diff coverage is 19.35%.

❗ Current head cf07f54 differs from pull request most recent head f90805f. Consider uploading reports for the commit f90805f to get more accurate results

@@             Coverage Diff             @@
##           develop    #8394      +/-   ##
===========================================
- Coverage    30.78%   30.77%   -0.01%     
===========================================
  Files          892      892              
  Lines        50664    50695      +31     
  Branches     12892    12898       +6     
===========================================
+ Hits         15595    15601       +6     
- Misses       35069    35094      +25     

Impacted Files	Coverage Δ
src/BasePlatform.ts	6.13% <0.00%> (-0.08%)	⬇️
...c/components/views/messages/EditHistoryMessage.tsx	0.00% <0.00%> (ø)
src/HtmlUtils.tsx	37.10% <21.73%> (-1.52%)	⬇️
src/components/views/messages/TextualBody.tsx	57.44% <100.00%> (+0.15%)	⬆️

[turt2live]

generally seems fine - thanks for the change :)

[turt2live]

thanks :)

[janogarcia]

Thanks, @Johennes!

Just a few issues I spotted when testing it.

Unsure if these are related in any way on how I enabled the URL tooltips in your Netlify build (ran mxPlatformPeg.get().needsUrlTooltips = () => true; instead of tweaking BasePlatform as suggested by @t3chguy cause otherwise monkey-patching the platform object would only affect linkification after that command).

• Links in the message body: At least on Chrome macOS the keyboard focus is trapped three times for each link. First time it doesn't show the tooltip, second and third tab press shows the tooltip. That said, some links only trap the focus twice, unsure what made those few links behave differently.
• Link in the URL preview title .mx_LinkPreviewWidget: Those links that show a tooltip trap the keyboard focus twice and don't show the tooltip the first time the link gets the keyboard focus. Other links only only trap the keyboard focus once but don't show the tooltip.

---

As for the tooltip not being automatically dismissed on visiting a link, I'd suggest either trying to dismiss it (ideal scenario) or just keep it as is, but not disabling it for keyboard navigation otherwise we could just use the title attribute which would have similar accessibility limitations.

https://www.tpgi.com/using-the-html-title-attribute/

[janogarcia]

PR comments in my previous message. #8394 (comment)

[janogarcia]

Keyboard navigation:

[Johennes]

I just noticed that the titles in URL preview titles (.mx_LinkPreviewWidget) don't generate a tooltip anymore. Is that expected?

Ah, great catch @janogarcia! I think these may have worked by accident only in the earlier version due to the same bug that caused the multifold keyboard trap. I've explicitly made them work in the fixed version as well now.

@t3chguy sorry, could I ask you for another review on the small change in the last commit?

[Johennes]

@janogarcia could you give this another look?

[janogarcia]

@Johennes Just tested it. Now it seems I'm only getting tooltips for the links in URL previews but not for text links in the message body . mx_EventTile_body. Unsure if that's a regression or a side-effect of the way I'm enabling tooltips on the Netlify build.

[Johennes]

@Johennes Just tested it. Now it seems I'm only getting tooltips for the links in URL previews but not for text links in the message body . mx_EventTile_body. Unsure if that's a regression or a side-effect of the way I'm enabling tooltips on the Netlify build.

@janogarcia: Hm, I just merged in master and tested again but it still works in both cases for me.

One thing to note is that the tooltip will not be shown if the link text is identical to the URL. E.g. the https://smartmobilefactory.com link in the screenshots above does not show a tooltip because that would just show the same text again.

Is it possible you've run into this case?

[janogarcia]

Is it possible you've run into this case?

Actually, I tested it for text links (rather than plain URLs) where the text link differs from the actual link, as I was aware of that behavior. I still think it may be related to how I enabled the feature via the browser console.

[janogarcia]

@Johennes It seems to be related to that console script, indeed. The correct behavior will only be attached to those links created after running the script. So, that's why it wasn't working for old messages for me.

[janogarcia]

@Johennes I'm approving the changes, assuming that when correctly enabled it will attach the tooltip behavior to all links (past and new). 👍 Thanks for working on this!

[Johennes]

Thanks @janogarcia! 🙂

@t3chguy if you're d'accord this should be ready to merge then, I think.