A first prototype (saved as templates/pages/hovercard.html and run with datasette fixtures.db --template-dir=templates):

```html+jinja {% extends "base.html" %}

{% block content %}

Hovercards demo

Here is a link to a row

<script> document.addEventListener("mouseover", async (ev) => { const a = ev.target; if (a.nodeName != 'A') { return; } window.A = a; // TODO: Respect base_url and suchlike if (A.pathname.split("/").length != 4) { return; // Definitely not a row } // OK, it might be a row! Try a fetch const response = await fetch(A.pathname + ".json?_shape=array"); if (response.status == 200) { const data = await response.json(); const row = data[0]; if (!a.hovercard) { a.hovercard = document.createElement("div"); a.hovercard.style.width = '300px'; a.hovercard.style.height = '200px'; a.hovercard.style.overflow = 'auto'; a.hovercard.style.backgroundColor = 'white'; a.hovercard.style.border = '1px solid #ccc'; a.hovercard.style.padding = '10px'; a.hovercard.style.position = 'absolute'; a.hovercard.style.whiteSpace = 'pre'; a.hovercard.style.top = ev.clientY + 'px'; a.hovercard.style.left = ev.clientX + 'px'; a.hovercard.style.boxShadow = '1px 2px 8px 2px rgba(0,0,0,0.08)'; document.body.appendChild(a.hovercard); } a.hovercard.innerText = JSON.stringify(row, null, 4); a.hovercard.style.display = 'block'; } }); </script>

{% endblock %} ```

Lots of decisions to make here. Most importantly, when should it be hidden again?