Mobile: Editor: Display tooltip above links to allow opening the link

packages/editor/CodeMirror/createEditor.ts

@@ -38,7 +38,7 @@ import overwriteModeExtension from './extensions/overwriteModeExtension';
 import handleLinkEditRequests, { showLinkEditor } from './utils/handleLinkEditRequests';
 import selectedNoteIdExtension, { setNoteIdEffect } from './extensions/selectedNoteIdExtension';
 import ctrlKeyStateClassExtension from './extensions/modifierKeyCssExtension';
-import ctrlClickLinksExtension from './extensions/links/ctrlClickLinksExtension';
+import followLinkTooltip from './extensions/links/followLinkTooltipExtension';
 import { RenderedContentContext } from './extensions/rendering/types';
 import ctrlClickCheckboxExtension from './extensions/ctrlClickCheckboxExtension';
 import editorSettingsExtension, { setEditorSettingsEffect } from './extensions/editorSettingsExtension';
@@ -270,7 +270,7 @@ const createEditor = (
 				EditorState.allowMultipleSelections.of(true),
 				rectangularSelection(),
 				drawSelection(),
-				ctrlClickLinksExtension(link => {
+				followLinkTooltip(link => {
 					props.onEvent({ kind: EditorEventType.FollowLink, link });
 				}),
 				ctrlClickCheckboxExtension(),

packages/editor/CodeMirror/extensions/links/followLinkTooltipExtension.ts

@@ -20,6 +20,9 @@ const getLinkTooltips = (onOpenLink: OnOpenLink, state: EditorState) => {
 		return {
 			pos: range.head,
 			arrow: true,
+			// Below the cursor Android often shows selection handles that
+			// overlap the tooltip.
+			above: true,
 			create: (view) => {
 				const dom = document.createElement('div');
 				dom.classList.add('cm-md-link-tooltip');
@@ -73,7 +76,6 @@ const followLinkTooltip = (onOpenExternalLink: OnOpenLink) => {
 				textOverflow: 'ellipsis',
 				overflowX: 'hidden',
 
-				textDecoration: 'underline',
 				cursor: 'pointer',
 				color: 'var(--joplin-url-color)',
 			},