fix: the tooltip issue

Author: biomathcode

.storybook/preview.ts

@@ -1,11 +1,12 @@
 import { withThemeByClassName } from "@storybook/addon-themes";
 import type { Preview } from "@storybook/react-webpack5";
+import "../src/styles.css";
 
 export const decorators = [
 	withThemeByClassName({
 		themes: {
-			light: "light-theme",
-			dark: "dark-theme",
+			light: "light",
+			dark: "dark",
 		},
 		defaultTheme: "light",
 	}),

src/Odontogram.tsx

@@ -108,7 +108,8 @@ export const Odontogram: FC<OdontogramProps> = ({
   colors = {},
   notation,
   tooltip = {
-    margin: 10,
+    margin: -10,
+    placement: "top"
   },
   showTooltip = true,
   showHalf = "full",
@@ -234,6 +235,11 @@ export const Odontogram: FC<OdontogramProps> = ({
 
     // Compute tooltip position just above or below depending on space
 
+    console.log(
+      "toothbox box", toothBox,
+      "svgBOx", svgBox
+    )
+
     const { x, y } =
       placements[placement]?.(toothBox, margin) ??
       placements.right(toothBox, margin);

src/Tooltip.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 
 export type TooltipContentRenderer = (payload?: any) => React.ReactNode;
 
@@ -23,18 +23,22 @@ export const OdontogramTooltip: React.FC<OdontogramTooltipProps> = ({
   content,
 }) => {
   const ref = useRef<HTMLDivElement>(null);
+  const [coords, setCoords] = useState({ left: 0, top: 0 });
 
   useEffect(() => {
-    if (ref.current && position) {
-      const { x, y } = position;
-      ref.current.style.left = `${x + 10}px`;
-      ref.current.style.top = `${y + 10}px`;
-    }
-  }, [position]);
+    if (!ref.current || !position) return;
 
-  if (!(active && payload)) {
-    return null;
-  }
+    const tooltipBox = ref.current.getBoundingClientRect();
+    const { x, y } = position;
+
+    // place tooltip above the hover point
+    const left = x - tooltipBox.width / 2;
+    const top = y - tooltipBox.height - 12; // space for arrow
+
+    setCoords({ left, top });
+  }, [position, content, payload]);
+
+  if (!(active && payload)) return null;
 
   return (
     <div
@@ -43,18 +47,23 @@ export const OdontogramTooltip: React.FC<OdontogramTooltipProps> = ({
       style={{
         position: "fixed",
         pointerEvents: "none",
-        background: "rgba(0, 0, 0, 0.75)",
+        background: "rgba(0,0,0,0.85)",
         color: "#fff",
         padding: "6px 10px",
         borderRadius: "6px",
         fontSize: "12px",
         lineHeight: 1.3,
         whiteSpace: "nowrap",
         zIndex: 1000,
-        transform: "translate(-50%, -100%)",
+
+        left: coords.left,
+        top: coords.top,
+
+        opacity: active ? 1 : 0,
         transition: "opacity 0.15s ease",
       }}
     >
+      {/* tooltip content */}
       {getContent(content, payload) ?? (
         <>
           <div>Tooth: {payload?.notations?.fdi}</div>
@@ -65,6 +74,22 @@ export const OdontogramTooltip: React.FC<OdontogramTooltipProps> = ({
           </div>
         </>
       )}
+
+      {/* ARROW */}
+      <div
+        className="odontogram-tooltip-arrow"
+        style={{
+          position: "absolute",
+          bottom: "-6px",
+          left: "50%",
+          transform: "translateX(-50%)",
+          width: 0,
+          height: 0,
+          borderLeft: "6px solid transparent",
+          borderRight: "6px solid transparent",
+          borderTop: "6px solid rgba(0, 0, 0, 0.85)", // arrow color
+        }}
+      />
     </div>
   );
 };

src/stories/Example.stories.tsx

@@ -4,6 +4,7 @@ import Odontogram from "..";
 export default {
   title: "Components/Odontogram",
   component: Odontogram,
+
   parameters: {
     layout: "centered",
     backgrounds: {
@@ -27,6 +28,7 @@ export default {
       control: "object",
     },
     onChange: { action: "changed" },
+
   },
 } as Meta<typeof Odontogram>;
 
@@ -40,9 +42,22 @@ Light.args = {
   onChange: (selected) => {
     alert(JSON.stringify(selected));
   },
+  tooltip: {
+    margin: -10,
+    placement: "top"
+  }
 };
 
-export const Dark = Template.bind({});
+
+
+const DarkTemplate: StoryFn<typeof Odontogram> = (args) =>
+  <div className="dark-template">
+    <Odontogram {...args} />
+  </div>
+  ;
+
+
+export const Dark = DarkTemplate.bind({});
 Dark.args = {
   theme: "dark",
   colors: {

src/styles.css

@@ -4,6 +4,22 @@
 	--light-blue: #c6ccf8;
 }
 
+
+
+#storybook-root {
+	width: 100%;
+	height: 100%;
+}
+
+.dark-template {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background-color: #0b0d1a;
+}
+
 /* 🌙 Dark theme overrides */
 .Odontogram svg.dark-theme {
 	--dark-blue: #aab6ff; /* lighter blue for contrast on dark bg */
@@ -87,4 +103,6 @@ g[class^="teeth-"]:hover path:nth-of-type(2) {
 
 .Odontogram g[role="option"]:focus-visible {
 outline: 4px solid var(--dark-blue) !important;
-}
+}
+
+