update

app/DJTooltip.tsx

@@ -1,5 +1,5 @@
 import { nextTick, inject, provide, watch, type InjectionKey, onBeforeUnmount, watchEffect, onMounted, type Ref, type CSSProperties, defineComponent, ref } from "vue";
-import { h as djh } from "@/util.ts";
+import { addCSS, css, h as djh } from "@/util.ts";
 
 type TooltipContext =  {
     show: (newText: string, x: number, y: number) => void,
@@ -8,9 +8,42 @@ type TooltipContext =  {
 
 const tooltipContext = Symbol('tooltip') as InjectionKey<TooltipContext>;
 
+const tooltipStyles = css`
+.tooltip-container {
+    display: inline-block;
+}
+
+.tooltip-carrier {
+    opacity: 0;
+    display: block;
+    pointer-events: none;
+    background-color: black;
+    border: white solid 1px;
+    color: white;
+    padding: 10px;
+    position: absolute;
+    z-index: 1;
+    overflow: hidden;
+    height: 0;
+    width: 0;
+    position: absolute;
+    transition: opacity 200ms, height 200ms, width 200ms;
+
+    .text-carrier {
+        position: absolute;
+        width: 350px;
+        font-size: 16px;
+        font-family: "Roboto", serif;
+        display: block;
+        overflow: hidden;
+    }
+}`;
+
 export function setupTooltip(options: { carrier: Ref<HTMLElement | null> }) {
     const { carrier } = options;
 
+    addCSS('tooltip-carrier', tooltipStyles);
+
     watchEffect(() => {
         if (carrier.value) {
             carrier.value.classList.add('tooltip-carrier');
@@ -82,6 +115,8 @@ export default defineComponent({
     setup(props, { slots, attrs }) {
         const tooltip = inject(tooltipContext, () => { throw new Error('No tooltip context'); }, true);
 
+        onBeforeUnmount(() => tooltip.hide());
+
         return () => <>
             <div class="tooltip-container" 
                 {...attrs}