From 6ba91da4627a1ff6613032035563923aa1ae6521 Mon Sep 17 00:00:00 2001
From: Katherine <katherine_15995@163.com>
Date: Sun, 10 May 2026 19:39:28 +0800
Subject: [PATCH] fix: markdown field tooltip being hidden in horizontal form
 layout (#9420)

---
 .../client/src/flow/common/Markdown/style.ts  | 30 +++++++++++++++++-
 .../src/client/components/style.ts            | 31 +++++++++++++++++--
 2 files changed, 58 insertions(+), 3 deletions(-)

diff --git a/packages/core/client/src/flow/common/Markdown/style.ts b/packages/core/client/src/flow/common/Markdown/style.ts
index 4f1097339a2..d6bb6981422 100644
--- a/packages/core/client/src/flow/common/Markdown/style.ts
+++ b/packages/core/client/src/flow/common/Markdown/style.ts
@@ -14,12 +14,40 @@ export default genStyleHook('nb-markdown-vditor', (token) => {
 
   return {
     [componentCls]: {
+      position: 'relative',
+      overflow: 'visible',
+      '&:hover, &:focus-within': {
+        zIndex: 1000,
+      },
       '.vditor-reset': { fontSize: `${token.fontSize}px !important`, color: 'unset' },
       '.vditor': {
         borderRadius: 8,
+        overflow: 'visible',
       },
       '.vditor .vditor-content': { borderRadius: '0 0 8px 8px', overflow: 'hidden' },
-      '.vditor .vditor-toolbar': { paddingLeft: ' 16px !important', borderRadius: '8px 8px 0 0' },
+      '.vditor .vditor-toolbar': {
+        position: 'relative',
+        overflow: 'visible',
+        paddingLeft: ' 16px !important',
+        borderRadius: '8px 8px 0 0',
+      },
+      '.vditor .vditor-tooltipped:hover, .vditor .vditor-tooltipped:focus, .vditor .vditor-tooltipped:active': {
+        zIndex: 1000,
+      },
+      '.vditor .vditor-toolbar .vditor-tooltipped__n::after, .vditor .vditor-toolbar .vditor-tooltipped__ne::after, .vditor .vditor-toolbar .vditor-tooltipped__nw::after':
+        {
+          top: '100%',
+          bottom: 'auto',
+          marginTop: 5,
+          marginBottom: 0,
+        },
+      '.vditor .vditor-toolbar .vditor-tooltipped__n::before, .vditor .vditor-toolbar .vditor-tooltipped__ne::before, .vditor .vditor-toolbar .vditor-tooltipped__nw::before':
+        {
+          top: 'auto',
+          bottom: -5,
+          borderTopColor: 'transparent',
+          borderBottomColor: '#3b3e43',
+        },
       '.vditor .vditor-content .vditor-ir .vditor-reset': { padding: '10px !important' },
       '.vditor-ir pre.vditor-reset': {
         backgroundColor: `${token.colorBgContainer}!important`,
diff --git a/packages/plugins/@nocobase/plugin-field-markdown-vditor/src/client/components/style.ts b/packages/plugins/@nocobase/plugin-field-markdown-vditor/src/client/components/style.ts
index 5e510687b04..ec9d06cad2a 100644
--- a/packages/plugins/@nocobase/plugin-field-markdown-vditor/src/client/components/style.ts
+++ b/packages/plugins/@nocobase/plugin-field-markdown-vditor/src/client/components/style.ts
@@ -14,10 +14,37 @@ export default genStyleHook('nb-field-markdown-vditor', (token) => {
 
   return {
     [componentCls]: {
+      position: 'relative',
+      overflow: 'visible',
+      '&:hover, &:focus-within': {
+        zIndex: 1000,
+      },
       '.vditor-reset': { fontSize: `${token.fontSize}px !important`, color: 'unset', padding: `10px !important` },
-      '.vditor': { borderRadius: 8 },
+      '.vditor': { borderRadius: 8, overflow: 'visible' },
       '.vditor .vditor-content': { borderRadius: '0 0 8px 8px', overflow: 'hidden' },
-      '.vditor .vditor-toolbar': { paddingLeft: ' 16px !important', borderRadius: '8px 8px 0 0' },
+      '.vditor .vditor-toolbar': {
+        position: 'relative',
+        overflow: 'visible',
+        paddingLeft: ' 16px !important',
+        borderRadius: '8px 8px 0 0',
+      },
+      '.vditor .vditor-tooltipped:hover, .vditor .vditor-tooltipped:focus, .vditor .vditor-tooltipped:active': {
+        zIndex: 1000,
+      },
+      '.vditor .vditor-toolbar .vditor-tooltipped__n::after, .vditor .vditor-toolbar .vditor-tooltipped__ne::after, .vditor .vditor-toolbar .vditor-tooltipped__nw::after':
+        {
+          top: '100%',
+          bottom: 'auto',
+          marginTop: 5,
+          marginBottom: 0,
+        },
+      '.vditor .vditor-toolbar .vditor-tooltipped__n::before, .vditor .vditor-toolbar .vditor-tooltipped__ne::before, .vditor .vditor-toolbar .vditor-tooltipped__nw::before':
+        {
+          top: 'auto',
+          bottom: -5,
+          borderTopColor: 'transparent',
+          borderBottomColor: '#3b3e43',
+        },
       '.vditor .vditor-content .vditor-ir .vditor-reset': { paddingLeft: ' 16px !important' },
       '.vditor-ir pre.vditor-reset': {
         backgroundColor: `${token.colorBgContainer}!important`,