Navio inside an Observable notebook

This page runs Navio through the real @observablehq/runtime, in the layout an Observable notebook actually produces: each cell in its own position: relative wrapper, with enough prose above that the widget sits well down the page.

Why the padding below matters. Navio anchors its tooltip to a virtual Popper reference — there is no DOM node under the cursor to attach to. popper.js v1 falls back to document.documentElement for a reference with no nodeType, so the offsets it computes are document-relative. While the tooltip lived inside the Navio container, any positioned ancestor made the browser resolve those numbers against that ancestor instead, and the tooltip landed low by however far down the page the cell sat. Flat example pages never showed it because their container starts at the top of the document. The tooltip is now appended to <body>, which is where Popper already believed it was.

viewof selection

selection

The first few selected rows

To point the notebook at your working copy instead of npm, serve the repo root and load dist/navio.js from it — which is what @john-guerra/navio-load already does:

npx http-server . -p 8080 --cors

Then in the notebook:

navio = {
  try {
    return await require(`http://localhost:8080/dist/navio.js?${Date.now()}`);
  } catch {
    return require("navio");
  }
}