diff --git a/querybook/webapp/components/CodeMirrorTooltip/FunctionDocumentationTooltip.tsx b/querybook/webapp/components/CodeMirrorTooltip/FunctionDocumentationTooltip.tsx
index 7a0803213..fffe9002c 100644
--- a/querybook/webapp/components/CodeMirrorTooltip/FunctionDocumentationTooltip.tsx
+++ b/querybook/webapp/components/CodeMirrorTooltip/FunctionDocumentationTooltip.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { IFunctionDescription } from 'const/metastore';
@@ -59,7 +59,7 @@ export const FunctionDocumentationTooltipByName: React.FunctionComponent<{
         if (language) {
             dispatch(fetchFunctionDocumentationIfNeeded(language));
         }
-    }, [language]);
+    }, [dispatch, language]);
 
     const functionDefs = functionDocumentationByNameByLanguage?.[language];
     const functionNameLower = (functionName || '').toLowerCase();
diff --git a/querybook/webapp/components/QueryEditor/QueryEditor.tsx b/querybook/webapp/components/QueryEditor/QueryEditor.tsx
index 362e43b1c..857949635 100644
--- a/querybook/webapp/components/QueryEditor/QueryEditor.tsx
+++ b/querybook/webapp/components/QueryEditor/QueryEditor.tsx
@@ -295,6 +295,7 @@ export const QueryEditor: React.FC<
             useHoverTooltipExtension({
                 codeAnalysisRef,
                 metastoreId: 1,
+                language,
             });
 
         const openTableModalCommand = useCallback((editorView: EditorView) => {
diff --git a/querybook/webapp/components/QueryEditor/themes.ts b/querybook/webapp/components/QueryEditor/themes.ts
index 1986da1bf..b2d21a827 100644
--- a/querybook/webapp/components/QueryEditor/themes.ts
+++ b/querybook/webapp/components/QueryEditor/themes.ts
@@ -16,7 +16,8 @@ export const CustomXcodeTheme = xcodeLightInit({
         gutterBackground: 'var(--bg-color)',
     },
     styles: [
-        { tag: [t.special(t.propertyName)], color: '#327A9E' },
+        { tag: [t.special(t.propertyName)], color: '#005cc5' },
         { tag: [t.constant(t.name), t.standard(t.name)], color: '#D23423' },
+        { tag: [t.number], color: '#098658' },
     ],
 });
diff --git a/querybook/webapp/hooks/queryEditor/extensions/useHoverTooltipExtension.tsx b/querybook/webapp/hooks/queryEditor/extensions/useHoverTooltipExtension.tsx
index 5edfb72a3..c5677521c 100644
--- a/querybook/webapp/hooks/queryEditor/extensions/useHoverTooltipExtension.tsx
+++ b/querybook/webapp/hooks/queryEditor/extensions/useHoverTooltipExtension.tsx
@@ -16,9 +16,11 @@ import { reduxStore } from 'redux/store';
 export const useHoverTooltipExtension = ({
     codeAnalysisRef,
     metastoreId,
+    language,
 }: {
     codeAnalysisRef: MutableRefObject<ICodeAnalysis>;
     metastoreId: number;
+    language: string;
 }) => {
     const getTableAtV5Position = useCallback(
         (codeAnalysis, v5Pos: { line: number; ch: number }) => {
@@ -57,7 +59,7 @@ export const useHoverTooltipExtension = ({
             const v5Pos = offsetToPos(editorView, selection.from);
             return getTableAtV5Position(codeAnalysisRef.current, v5Pos);
         },
-        [getTableAtV5Position]
+        [codeAnalysisRef, getTableAtV5Position]
     );
 
     const getHoverTooltips: HoverTooltipSource = useCallback(
@@ -80,7 +82,7 @@ export const useHoverTooltipExtension = ({
             } else if (nextChar === '(') {
                 tooltipComponent = (
                     <FunctionDocumentationTooltipByName
-                        language="sqlite"
+                        language={language}
                         functionName={token.text}
                     />
                 );
@@ -107,7 +109,7 @@ export const useHoverTooltipExtension = ({
                 },
             };
         },
-        []
+        [codeAnalysisRef, getTableAtV5Position, language, metastoreId]
     );
 
     const extension = useMemo(