Add option to display tooltip on link hover

src/components/views/elements/LinkWithTooltip.tsx

@@ -0,0 +1,44 @@
+/*
+ Copyright 2022 New Vector Ltd.
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import React from 'react';
+
+import TextWithTooltip from './TextWithTooltip';
+
+interface IProps extends Omit<React.ComponentProps<typeof TextWithTooltip>, "tabIndex" | "onClick" > {}
+
+export default class LinkWithTooltip extends React.Component<IProps> {
+    constructor(props: IProps) {
+        super(props);
+    }
+
+    public render(): JSX.Element {
+        const { children, tooltip, ...props } = this.props;
+
+        return (
+            <TextWithTooltip
+                // Disable focusing on the tooltip target to avoid double / nested focus. The contained anchor element
+                // itself allows focusing which also triggers the tooltip.
+                tabIndex={-1}
+                tooltip={tooltip}
+                onClick={e => (e.target as HTMLElement).blur()} // Force tooltip to hide on clickout
+                {...props}
+            >
+                { children }
+            </TextWithTooltip>
+        );
+    }
+}

src/components/views/rooms/LinkPreviewWidget.tsx

@@ -25,6 +25,8 @@ import Modal from "../../../Modal";
 import * as ImageUtils from "../../../ImageUtils";
 import { mediaFromMxc } from "../../../customisations/Media";
 import ImageView from '../elements/ImageView';
+import LinkWithTooltip from '../elements/LinkWithTooltip';
+import PlatformPeg from '../../../PlatformPeg';
 
 interface IProps {
     link: string;
@@ -118,12 +120,19 @@ export default class LinkPreviewWidget extends React.Component<IProps> {
         // opaque string. This does not allow any HTML to be injected into the DOM.
         const description = AllHtmlEntities.decode(p["og:description"] || "");
 
+        const anchor = <a href={this.props.link} target="_blank" rel="noreferrer noopener">{ p["og:title"] }</a>;
+        const needsTooltip = PlatformPeg.get()?.needsUrlTooltips() && this.props.link !== p["og:title"].trim();
+
         return (
             <div className="mx_LinkPreviewWidget">
                 { img }
                 <div className="mx_LinkPreviewWidget_caption">
                     <div className="mx_LinkPreviewWidget_title">
-                        <a href={this.props.link} target="_blank" rel="noreferrer noopener">{ p["og:title"] }</a>
+                        { needsTooltip ? <LinkWithTooltip
+                            tooltip={new URL(this.props.link, window.location.href).toString()}
+                        >
+                            { anchor }
+                        </LinkWithTooltip> : anchor }
                         { p["og:site_name"] && <span className="mx_LinkPreviewWidget_siteName">
                             { (" - " + p["og:site_name"]) }
                         </span> }

src/utils/tooltipify.tsx

@@ -18,7 +18,7 @@ import React from "react";
 import ReactDOM from 'react-dom';
 
 import PlatformPeg from "../PlatformPeg";
-import TextWithTooltip from "../components/views/elements/TextWithTooltip";
+import LinkWithTooltip from "../components/views/elements/LinkWithTooltip";
 
 /**
  * If the platform enabled needsUrlTooltips, recurses depth-first through a DOM tree, adding tooltip previews
@@ -52,15 +52,9 @@ export function tooltipifyLinks(rootNodes: ArrayLike<Element>, ignoredNodes: Ele
             const container = document.createElement("span");
             const href = node.getAttribute("href");
 
-            const tooltip = <TextWithTooltip
-                // Disable focusing on the tooltip target to avoid double / nested focus. The contained anchor element
-                // itself allows focusing which also triggers the tooltip.
-                tabIndex={-1}
-                tooltip={new URL(href, window.location.href).toString()}
-                onClick={e => (e.target as HTMLElement).blur()} // Force tooltip to hide on clickout
-            >
+            const tooltip = <LinkWithTooltip tooltip={new URL(href, window.location.href).toString()}>
                 <span dangerouslySetInnerHTML={{ __html: node.outerHTML }} />
-            </TextWithTooltip>;
+            </LinkWithTooltip>;
 
             ReactDOM.render(tooltip, container);
             node.parentNode.replaceChild(container, node);