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

Hovercards demo

Here is a link to a row

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