fix some styling issues

packages/grafana-ui/src/components/CodeMirror/CodeMirrorEditor.tsx

@@ -12,7 +12,6 @@ import {
   lineNumbers,
   placeholder as placeholderExtension,
   rectangularSelection,
-  tooltips,
   ViewUpdate,
 } from '@codemirror/view';
 import { css, cx } from '@emotion/css';
@@ -56,12 +55,11 @@ export const CodeMirrorEditor = memo((props: CodeMirrorEditorProps) => {
   // Build theme extensions
   const getThemeExtensions = () => {
     const themeExt = themeFactory ? themeFactory(theme) : createGenericTheme(theme);
-    const highlighterExt =
-      highlighterFactory && highlightConfig
-        ? highlighterFactory(highlightConfig)
-        : highlightConfig
-          ? createGenericHighlighter(highlightConfig)
-          : [];
+    const highlighterExt = highlighterFactory
+      ? highlighterFactory(highlightConfig)
+      : highlightConfig
+        ? createGenericHighlighter(highlightConfig)
+        : [];
 
     return [themeExt, highlighterExt];
   };
@@ -91,9 +89,6 @@ export const CodeMirrorEditor = memo((props: CodeMirrorEditorProps) => {
           onChange(newValue);
         }
       }),
-      tooltips({
-        parent: document.body, // Render tooltips at body level to prevent clipping by modals
-      }),
       themeCompartment.current.of(getThemeExtensions()),
       EditorState.phrases.of({
         next: 'Next',

packages/grafana-ui/src/components/CodeMirror/styles.ts

@@ -49,13 +49,11 @@ export function createGenericTheme(theme: GrafanaTheme2): Extension {
       '.cm-gutters': {
         display: 'none',
       },
-      '.cm-tooltip': {
-        zIndex: theme.zIndex.portal + 1, // Above modals and portals (1062)
-      },
       '.cm-tooltip.cm-tooltip-autocomplete': {
         backgroundColor: theme.colors.background.primary,
         border: `1px solid ${theme.colors.border.weak}`,
         boxShadow: theme.shadows.z3,
+        pointerEvents: 'auto',
       },
       '.cm-tooltip.cm-tooltip-autocomplete > ul': {
         fontFamily: theme.typography.fontFamily,
@@ -64,6 +62,10 @@ export function createGenericTheme(theme: GrafanaTheme2): Extension {
       '.cm-tooltip.cm-tooltip-autocomplete > ul > li': {
         padding: '2px 8px',
         color: theme.colors.text.primary,
+        cursor: 'pointer',
+      },
+      '.cm-tooltip.cm-tooltip-autocomplete > ul > li:hover': {
+        backgroundColor: theme.colors.background.secondary,
       },
       '.cm-tooltip-autocomplete ul li[aria-selected]': {
         backgroundColor: theme.colors.background.secondary,

packages/grafana-ui/src/components/DataLinks/DataLinkEditor.tsx

@@ -51,7 +51,7 @@ export const DataLinkEditor = memo(
           />
         </Field>
 
-        <Field label={t('grafana-ui.data-link-editor.url-label', 'URL')}>
+        <Field label={t('grafana-ui.data-link-editor.url-label', 'URL')} className={styles.urlField}>
           <DataLinkInput value={value.url} onChange={onUrlChange} suggestions={suggestions} />
         </Field>
 
@@ -88,6 +88,10 @@ const getStyles = (theme: GrafanaTheme2) => ({
   listItem: css({
     marginBottom: theme.spacing(),
   }),
+  urlField: css({
+    position: 'relative',
+    zIndex: theme.zIndex.typeahead,
+  }),
   infoText: css({
     paddingBottom: theme.spacing(2),
     marginLeft: '66px',

packages/grafana-ui/src/components/DataLinks/codemirrorUtils.ts

@@ -60,8 +60,6 @@ function createCompletionOption(
 
   return {
     label: suggestion.label,
-    detail: suggestion.origin,
-    info: suggestion.documentation,
     apply: customApply ?? applyText,
     type: 'variable',
   };