Show full link when hovering over hyperlink

src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly/index.js

@@ -10,6 +10,7 @@ import * as ReportActionContextMenu from '../../../pages/home/report/ContextMenu
 import * as ContextMenuActions from '../../../pages/home/report/ContextMenu/ContextMenuActions';
 import AttachmentView from '../../AttachmentView';
 import fileDownload from '../../../libs/fileDownload';
+import Tooltip from '../../Tooltip';
 
 /*
  * This is a default anchor component for regular links.
@@ -70,20 +71,22 @@ class BaseAnchorForCommentsOnly extends React.Component {
                         }
                     }
                     >
-                        <Text
-                            ref={el => linkRef = el}
-                            style={StyleSheet.flatten(this.props.style)}
-                            accessibilityRole="link"
-                            href={this.props.href}
-                            hrefAttrs={{
-                                rel: this.props.rel,
-                                target: this.props.target,
-                            }}
-                        // eslint-disable-next-line react/jsx-props-no-spreading
-                            {...rest}
-                        >
-                            {this.props.children}
-                        </Text>
+                        <Tooltip text={Str.isValidEmail(this.props.displayName) ? '' : this.props.href}>
+                            <Text
+                                ref={el => linkRef = el}
+                                style={StyleSheet.flatten(this.props.style)}
+                                accessibilityRole="link"
+                                href={this.props.href}
+                                hrefAttrs={{
+                                    rel: this.props.rel,
+                                    target: this.props.target,
+                                }}
+                            // eslint-disable-next-line react/jsx-props-no-spreading
+                                {...rest}
+                            >
+                                {this.props.children}
+                            </Text>
+                        </Tooltip>
                     </PressableWithSecondaryInteraction>
                 )
         );

src/components/ContextMenuItem.js

@@ -29,13 +29,17 @@ const propTypes = {
 
     /** Automatically reset the success status */
     autoReset: PropTypes.bool,
+
+    /** A description text to show under the title */
+    description: PropTypes.string,
 };
 
 const defaultProps = {
     isMini: false,
     successIcon: null,
     successText: '',
     autoReset: false,
+    description: '',
 };
 
 class ContextMenuItem extends Component {
@@ -109,6 +113,7 @@ class ContextMenuItem extends Component {
                         onPress={this.triggerPressAndUpdateSuccess}
                         wrapperStyle={styles.pr9}
                         success={this.state.success}
+                        description={this.props.description}
                     />
                 )
         );

src/components/MenuItem.js

@@ -101,7 +101,7 @@ const MenuItem = props => (
                         >
                             {props.title}
                         </Text>
-                        {props.description && (
+                        {Boolean(props.description) && (
                             <Text style={[styles.textLabelSupporting, styles.ml3, styles.mt1]}>
                                 {props.description}
                             </Text>

src/pages/home/report/ContextMenu/BaseReportActionContextMenu.js

@@ -10,12 +10,15 @@ import {
 } from './genericReportActionContextMenuPropTypes';
 import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize';
 import ContextMenuActions, {CONTEXT_MENU_TYPES} from './ContextMenuActions';
+import compose from '../../../../libs/compose';
+import withWindowDimensions, {windowDimensionsPropTypes} from '../../../../components/withWindowDimensions';
 
 const propTypes = {
     /** String representing the context menu type [LINK, REPORT_ACTION] which controls context menu choices  */
     type: PropTypes.string,
     ...genericReportActionContextMenuPropTypes,
     ...withLocalizePropTypes,
+    ...windowDimensionsPropTypes,
 };
 
 const defaultProps = {
@@ -49,6 +52,7 @@ class BaseReportActionContextMenu extends React.Component {
                             draftMessage: this.props.draftMessage,
                             selection: this.props.selection,
                         })}
+                        description={contextAction.getDescription ? contextAction.getDescription({selection: this.props.selection, isSmallScreenWidth: this.props.isSmallScreenWidth}) : ''}
                     />
                 ))}
             </View>
@@ -59,4 +63,7 @@ class BaseReportActionContextMenu extends React.Component {
 BaseReportActionContextMenu.propTypes = propTypes;
 BaseReportActionContextMenu.defaultProps = defaultProps;
 
-export default withLocalize(BaseReportActionContextMenu);
+export default compose(
+    withLocalize,
+    withWindowDimensions,
+)(BaseReportActionContextMenu);

src/pages/home/report/ContextMenu/ContextMenuActions.js

@@ -11,6 +11,7 @@ import CONST from '../../../../CONST';
 import getAttachmentDetails from '../../../../libs/fileDownload/getAttachmentDetails';
 import fileDownload from '../../../../libs/fileDownload';
 import addEncryptedAuthTokenToURL from '../../../../libs/addEncryptedAuthTokenToURL';
+import * as ContextMenuUtils from './ContextMenuUtils';
 
 /**
  * Gets the HTML version of the message in an action.
@@ -62,6 +63,7 @@ export default [
             Clipboard.setString(selection);
             hideContextMenu(true, ReportActionComposeFocusManager.focus);
         },
+        getDescription: ({selection, isSmallScreenWidth}) => (ContextMenuUtils.shouldShowDescription(isSmallScreenWidth) ? selection : ''),
     },
     {
         textTranslateKey: 'reportActionContextMenu.copyEmailToClipboard',

src/pages/home/report/ContextMenu/ContextMenuUtils/index.js

@@ -0,0 +1,15 @@
+/* eslint-disable import/prefer-default-export */
+
+/**
+ * We should show popover description only for mWeb
+ *
+ * @param {Boolean} isSmallScreenWidth
+ * @returns {Boolean}
+ */
+function shouldShowDescription(isSmallScreenWidth) {
+    return isSmallScreenWidth;
+}
+
+export {
+    shouldShowDescription,
+};

src/pages/home/report/ContextMenu/ContextMenuUtils/index.native.js

@@ -0,0 +1,14 @@
+/* eslint-disable import/prefer-default-export */
+
+/**
+ * Always show popover description for native platforms
+ *
+ * @returns {Boolean}
+ */
+function shouldShowDescription() {
+    return true;
+}
+
+export {
+    shouldShowDescription,
+};