position default tooltip above marker

Author: duncanbradley

src/lib/components/data-vis/line-chart/ValueLabel.svelte

@@ -3,7 +3,7 @@
     activeMarkerId,
     labelColor = "red",
     labelTextColor,
-    tooltipContent,
+    tooltipContent = activeMarkerId.y,
     xFunction,
     yFunction,
     x,
@@ -15,24 +15,24 @@
   let textDimensions = $state();
   let verticalPadding = $state(8);
   let horizontalPadding = $derived(verticalPadding * 2);
+  $inspect(markerRect);
 </script>
 
 {#if tooltipSnippet === undefined}
   <div
     style="position:absolute;
-  top: {markerRect?.y}px;
-  left: {markerRect?.x}px;
-  font-size: 24px;
+  top: {markerRect?.y - (textDimensions?.height ?? 0) - 15}px;
+left: {markerRect?.x +
+      (markerRect?.width ?? 0) / 2 -
+      (textDimensions?.width ?? 0) / 2}px;
   pointer-events: none;
   background-color: {labelColor};
   padding: 5px;
   border-radius: 5px;
-  height={(textDimensions?.height ?? 0) + verticalPadding}
-  rx=5;
-  ry=5;
-  width={(textDimensions?.width ?? 0) + horizontalPadding}"
+  height={textDimensions?.height ?? 0}
+  width={textDimensions?.width ?? 0}"
   >
-    <p bind:contentRect={textDimensions}>tooltipContent is a string</p>
+    <div bind:contentRect={textDimensions}>{activeMarkerId.y}</div>
   </div>
 {:else}<div
     style="position: absolute; top: {markerRect?.y}px; left: {markerRect?.x}px;"

src/wrappers/components/data-vis/line-chart/LineChartWrapper.svelte

@@ -534,7 +534,6 @@
         description:
           "Background color of the chart. Also used for the 'halo' outline given to lines.",
       },
-      { name: "tooltipSnippet", category: "tooltip", value: tooltipSnippet },
       {
         name: "xFunction",
         category: "xScale",
@@ -558,7 +557,7 @@
       {
         name: "tooltipContent",
         category: "interactions",
-        value: "Here's some content for a tooltip",
+        value: "tooltipContent from Wrapper",
       },
       {
         name: "getLine",
@@ -587,7 +586,7 @@
           }
         },`,
         },
-        value: function (key, el) {
+        value: function (tier, el) {
           let primaryLines = [
             "E07000224",
             "E07000225",
@@ -596,16 +595,16 @@
             englandMedian,
             similarAreas,
           ];
-          if (key === "primary") {
+          if (tier === "primary") {
             return primaryLines.includes(el[series]);
           }
-          if (key === "secondary" && !primaryLines.includes(el[series])) {
+          if (tier === "secondary" && !primaryLines.includes(el[series])) {
             return true;
           }
-          if (key === "hover") {
+          if (tier === "hover") {
             return [hoveredSeries, hoveredSeries].includes(el[series]);
           }
-          if (key === "clicked") {
+          if (tier === "clicked") {
             return [clickedSeries, clickedSeries].includes(el[series]);
           }
         },
@@ -928,7 +927,3 @@ DONOTTOUCH  *
 <div id="examples" data-role="examples-section">
   <Examples {data}></Examples>
 </div>
-
-{#snippet tooltipSnippet(activeMarkerId)}
-  {@html `<div style="border: 1px solid black; padding: 0.5rem; background-color: white; pointer-events: none">${activeMarkerId.y}</div>`}
-{/snippet}

src/wrappers/components/data-vis/line-chart/line-chart/Examples.svelte

@@ -144,7 +144,13 @@
 {/snippet}
 
 {#snippet tooltipSnippet(activeMarkerId)}
-  {@html `<div style="border: 1px solid black; padding: 0.5rem; background-color: white; pointer-events: none"><i>Value:</i> ${activeMarkerId.y}<br><i>Year:</i> ${activeMarkerId.x}</div>`}
+  <div
+    style="border: 1px solid black; padding: 0.5rem; background-color: white; pointer-events: none"
+  >
+    <i>Value:</i>
+    {activeMarkerId.y}<br /><i>Year:</i>
+    {activeMarkerId.x}
+  </div>
 {/snippet}
 
 {#snippet Example4()}