|
1 | 1 | import {EditorView, hoverTooltip} from '@codemirror/view' |
2 | 2 |
|
3 | | -1 |
4 | | - |
5 | 3 | export function useCodeMirrorFunctionHelp() |
6 | 4 | { |
7 | 5 | // 提示框 |
8 | 6 | const createHelpTooltip = (text: string) => { |
9 | 7 | const dom = document.createElement('div') |
10 | | - dom.className = 'cm-function-help-tooltip' |
| 8 | + dom.className = 'cm-custom-function-tooltip' |
11 | 9 |
|
12 | 10 | dom.innerHTML = ` |
13 | 11 | <div class="relative mb-1"> |
14 | 12 | <div class="px-2 py-1 bg-gray-800 text-white text-xs rounded"> |
15 | 13 | <span class="font-mono">${text}</span> |
16 | 14 | </div> |
17 | | - <!-- 小三角箭头 --> |
18 | 15 | <div class="absolute left-1/2 transform -translate-x-1/2 top-full"> |
19 | 16 | <div class="w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-gray-800"></div> |
20 | 17 | </div> |
@@ -50,18 +47,15 @@ export function useCodeMirrorFunctionHelp() |
50 | 47 |
|
51 | 48 | // 提示框样式主题 |
52 | 49 | const functionHelpTheme = EditorView.theme({ |
53 | | - '.cm-function-help-tooltip': { |
| 50 | + '.cm-custom-function-tooltip': { |
54 | 51 | zIndex: '100', |
55 | 52 | animation: 'fadeIn 0.2s ease-out' |
56 | 53 | }, |
57 | | - '.cm-tooltip': { |
58 | | - border: 'none !important', |
| 54 | + '.cm-tooltip.cm-tooltip-hover': { |
59 | 55 | backgroundColor: 'transparent !important', |
| 56 | + border: 'none !important', |
60 | 57 | boxShadow: 'none !important' |
61 | 58 | }, |
62 | | - '.cm-tooltip-arrow': { |
63 | | - display: 'none !important' |
64 | | - }, |
65 | 59 | '@keyframes fadeIn': { |
66 | 60 | 'from': {opacity: '0', transform: 'translateY(-2px)'}, |
67 | 61 | 'to': {opacity: '1', transform: 'translateY(0)'} |
|
0 commit comments