diff --git a/web-console/src/views/query-view/query-input/__snapshots__/query-input.spec.tsx.snap b/web-console/src/views/query-view/query-input/__snapshots__/query-input.spec.tsx.snap
index e2d965dd86f..c5906e52a2d 100644
--- a/web-console/src/views/query-view/query-input/__snapshots__/query-input.spec.tsx.snap
+++ b/web-console/src/views/query-view/query-input/__snapshots__/query-input.spec.tsx.snap
@@ -1,5 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`query input correctly formats helper HTML 1`] = `
+"
+<div class=\\"function-doc\\">
+  <div class=\\"function-doc-name\\">
+    <b>COUNT</b>
+  </div>
+  <hr />
+  <div>
+    <b>Syntax:</b>
+  </div>
+  <div>COUNT(*)</div>
+  <br />
+  <div>
+    <b>Description:</b>
+  </div>
+  <div>Counts the number of things</div>
+</div>"
+`;
+
 exports[`query input matches snapshot 1`] = `
 <div
   class="query-input"
diff --git a/web-console/src/views/query-view/query-input/query-input.spec.tsx b/web-console/src/views/query-view/query-input/query-input.spec.tsx
index f391e3df884..b0b198e5d43 100644
--- a/web-console/src/views/query-view/query-input/query-input.spec.tsx
+++ b/web-console/src/views/query-view/query-input/query-input.spec.tsx
@@ -30,4 +30,14 @@ describe('query input', () => {
     const { container } = render(sqlControl);
     expect(container.firstChild).toMatchSnapshot();
   });
+
+  it('correctly formats helper HTML', () => {
+    expect(
+      QueryInput.completerToHtml({
+        caption: 'COUNT',
+        syntax: 'COUNT(*)',
+        description: 'Counts the number of things',
+      }),
+    ).toMatchSnapshot();
+  });
 });
diff --git a/web-console/src/views/query-view/query-input/query-input.tsx b/web-console/src/views/query-view/query-input/query-input.tsx
index 8056c4787d0..030fc833f1b 100644
--- a/web-console/src/views/query-view/query-input/query-input.tsx
+++ b/web-console/src/views/query-view/query-input/query-input.tsx
@@ -106,11 +106,17 @@ export class QueryInput extends React.PureComponent<QueryInputProps, QueryInputS
       },
       getDocTooltip: (item: any) => {
         if (item.meta === 'function') {
-          const functionName = item.caption.slice(0, -2);
-          item.docHTML = `
+          item.docHTML = QueryInput.completerToHtml(item);
+        }
+      },
+    });
+  }
+
+  static completerToHtml(item: any) {
+    return `
 <div class="function-doc">
   <div class="function-doc-name">
-    <b>${escape(functionName)}</b>
+    <b>${escape(item.caption)}</b>
   </div>
   <hr />
   <div>
@@ -123,9 +129,6 @@ export class QueryInput extends React.PureComponent<QueryInputProps, QueryInputS
   </div>
   <div>${escape(item.description)}</div>
 </div>`;
-        }
-      },
-    });
   }
 
   static getDerivedStateFromProps(props: QueryInputProps, state: QueryInputState) {