html_url,issue_url,id,node_id,user,created_at,updated_at,author_association,body,reactions,issue,performed_via_github_app
https://github.com/simonw/datasette/issues/1540#issuecomment-984037711,https://api.github.com/repos/simonw/datasette/issues/1540,984037711,IC_kwDOBm6k_c46pzlP,9599,2021-12-01T20:42:17Z,2021-12-01T20:43:14Z,OWNER,"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 %}

<h1>Hovercards demo</h1>

Here is a <a href=""/fixtures/facetable/1"">link to a row</a>

<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 %}
```

![hovercard](https://user-images.githubusercontent.com/9599/144310888-6db71bad-b6f6-4d8a-a737-81a618022bbe.gif)

Lots of decisions to make here. Most importantly, when should it be hidden again?","{""total_count"": 0, ""+1"": 0, ""-1"": 0, ""laugh"": 0, ""hooray"": 0, ""confused"": 0, ""heart"": 0, ""rocket"": 0, ""eyes"": 0}",1068791148,