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-984801331,https://api.github.com/repos/simonw/datasette/issues/1540,984801331,IC_kwDOBm6k_c46suAz,9599,2021-12-02T16:42:02Z,2021-12-09T23:38:39Z,OWNER,"I'm going to wrap this up in a plugin for the moment - I want it in Datasette core but I'd like to improve the implementation first with things like support for `base_url` which will likely depend on #1533 or similar.

Here's the plugin: https://github.com/simonw/datasette-hovercards","{""total_count"": 0, ""+1"": 0, ""-1"": 0, ""laugh"": 0, ""hooray"": 0, ""confused"": 0, ""heart"": 0, ""rocket"": 0, ""eyes"": 0}",1068791148,
https://github.com/simonw/datasette/issues/1540#issuecomment-984053760,https://api.github.com/repos/simonw/datasette/issues/1540,984053760,IC_kwDOBm6k_c46p3gA,9599,2021-12-01T21:05:20Z,2021-12-01T21:05:20Z,OWNER,"I realized you couldn't click the links any more because the hovercard overlapped them, so I changed it to this instead. Need to reconsider the when-to-hide logic though.

```javascript
hovercard.style.top = (ev.pageY + 15) + 'px';
```","{""total_count"": 0, ""+1"": 0, ""-1"": 0, ""laugh"": 0, ""hooray"": 0, ""confused"": 0, ""heart"": 0, ""rocket"": 0, ""eyes"": 0}",1068791148,
https://github.com/simonw/datasette/issues/1540#issuecomment-984051925,https://api.github.com/repos/simonw/datasette/issues/1540,984051925,IC_kwDOBm6k_c46p3DV,9599,2021-12-01T21:03:16Z,2021-12-01T21:03:16Z,OWNER,Needs `pageX` not `clientX` because otherwise it doesn't work when you scroll down the page.,"{""total_count"": 0, ""+1"": 0, ""-1"": 0, ""laugh"": 0, ""hooray"": 0, ""confused"": 0, ""heart"": 0, ""rocket"": 0, ""eyes"": 0}",1068791148,
https://github.com/simonw/datasette/issues/1540#issuecomment-984048965,https://api.github.com/repos/simonw/datasette/issues/1540,984048965,IC_kwDOBm6k_c46p2VF,9599,2021-12-01T20:59:26Z,2021-12-01T21:02:58Z,OWNER,"This is a bit of a mess but it does keep the hovercard around for a moment and then fade it away when you mouse out of it:

```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>
let hovercardOuterAnimation = null;
let hovercardInnerAnimation = null;
let hovercard = document.createElement(""div"");
hovercard.setAttribute(""id"", ""datasette-hovercard"")
hovercard.style.width = '300px';
hovercard.style.height = '200px';
hovercard.style.overflow = 'auto';
hovercard.style.backgroundColor = 'white';
hovercard.style.border = '1px solid #ccc';
hovercard.style.padding = '10px';
hovercard.style.position = 'absolute';
hovercard.style.whiteSpace = 'pre';
hovercard.style.display = 'none';
hovercard.style.boxShadow = '1px 2px 8px 2px rgba(0,0,0,0.08)';
document.body.appendChild(hovercard);

document.addEventListener(""mouseover"", async (ev) => {
  const a = ev.target;
  if (a.nodeName != 'A') {
    return;
  }
  // 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
  let row;
  if (a.hovercardRowData) {
    row = a.hovercardRowData;
  } else {
    const response = await fetch(a.pathname + "".json?_shape=array"");
    if (response.status == 200) {
      const data = await response.json();
      row = data[0];
      a.hovercardRowData = row;
    }
  }
  if (row) {
    // Cancel any existing animations
    if (hovercardOuterAnimation) {
      clearTimeout(hovercardOuterAnimation);
    }
    if (hovercardInnerAnimation) {
      clearTimeout(hovercardInnerAnimation);
    }
    // -15 so mouse pointer starts in the box
    hovercard.style.top = (ev.pageY - 15) + 'px';
    hovercard.style.left = (ev.pageX - 15) + 'px';
    hovercard.innerText = JSON.stringify(row, null, 4);
    hovercard.style.display = 'block';
    hovercard.style.opacity = 100;
    hovercard.style.transition = 'none';
  }
});

document.addEventListener(""mouseout"", (ev) => {
  if (ev.target.id != ""datasette-hovercard"") {
    return;
  }
  hovercardOuterAnimation = setTimeout(() => {
    hovercard.style.transition = 'opacity 0.4s ease-in-out';
    hovercard.style.opacity = 0;
    hovercardInnerAnimation = setTimeout(() => {
      hovercard.style.transition = 'none';
      hovercard.style.display = ""none"";
      hovercard.style.opacity = 100;
    }, 800)
  }, 400);
})
</script>

{% endblock %}
```","{""total_count"": 0, ""+1"": 0, ""-1"": 0, ""laugh"": 0, ""hooray"": 0, ""confused"": 0, ""heart"": 0, ""rocket"": 0, ""eyes"": 0}",1068791148,
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,
https://github.com/simonw/datasette/issues/1540#issuecomment-983985330,https://api.github.com/repos/simonw/datasette/issues/1540,983985330,IC_kwDOBm6k_c46pmyy,9599,2021-12-01T19:29:05Z,2021-12-01T19:29:05Z,OWNER,"The layout of the hover card could be similar to the one used by `datasette-cluster-map`:

<img width=""387"" alt=""global-power-plants__global-power-plants__33_643_rows"" src=""https://user-images.githubusercontent.com/9599/144300723-2c733a0f-9daf-430d-a247-6c87f138e728.png"">


","{""total_count"": 0, ""+1"": 0, ""-1"": 0, ""laugh"": 0, ""hooray"": 0, ""confused"": 0, ""heart"": 0, ""rocket"": 0, ""eyes"": 0}",1068791148,