Attach completer to `document.body`.

examples/notebook/src/index.ts

@@ -152,12 +152,12 @@ function createApp(manager: ServiceManager.IManager): void {
   panel.spacing = 0;
   SplitPanel.setStretch(palette, 0);
   SplitPanel.setStretch(nbWidget, 1);
-  panel.addWidget(completer);
   panel.addWidget(palette);
   panel.addWidget(nbWidget);
 
   // Attach the panel to the DOM.
   Widget.attach(panel, document.body);
+  Widget.attach(completer, document.body);
 
   // Handle resize events.
   window.addEventListener('resize', () => {

packages/completer/src/widget.ts

@@ -52,6 +52,12 @@ const N_COLORS = 10;
 
 /**
  * A widget that enables text completion.
+ *
+ * #### Notes
+ * The completer is intended to be absolutely positioned on the
+ * page and hover over any other content, so it should be attached directly
+ * to `document.body`, or a node that is the full size of `document.body`.
+ * Attaching it to other nodes may incorrectly locate the completer.
  */
 export class Completer extends Widget {
   /**