tabindex/hover cutoff fixes

Author: KianNH

src/components/GlossaryTooltip.astro

@@ -30,6 +30,7 @@ definition = definition.split(/\r?\n/)[0];
 	data-tooltip
 	data-content={marked.parse(definition)}
 	class="border-b-2 border-dashed border-accent-600"
+	tabindex="0"
 	>{
 		link ? (
 			<a href={link}><slot /></a>

src/scripts/footnotes.ts

@@ -16,6 +16,8 @@ if (footnotes) {
 			addTooltip(fnref, content.innerHTML);
 
 			fnref.classList.add("footnote");
+
+			fnref.setAttribute("tabindex", "0");
 			fnref.removeAttribute("href");
 		}
 	}

src/util/tippy.ts

@@ -9,5 +9,10 @@ export function addTooltip(element: HTMLElement, content: string) {
 		interactive: true,
 		placement: "auto",
 		arrow: false,
+		// This is imperfect as it stops you from tabbing into
+		// links inside the tooltip, but stops tooltips being
+		// cutoff by the sidebar
+		// https://atomiks.github.io/tippyjs/v6/faq/#my-tooltip-appears-cut-off-or-is-not-showing-at-all
+		appendTo: document.body,
 	});
 }