@x-plat/design-system 0.5.36 → 0.5.38

package/dist/components/Tooltip/index.js

@@ -1,5 +1,19 @@
 // src/components/Tooltip/Tooltip.tsx
+import React2 from "react";
+
+// src/tokens/hooks/Portal.tsx
 import React from "react";
+import ReactDOM from "react-dom";
+import { jsx } from "react/jsx-runtime";
+var PortalContainerContext = React.createContext(null);
+var Portal = ({ children }) => {
+  const contextContainer = React.useContext(PortalContainerContext);
+  if (typeof document === "undefined") return null;
+  const container = contextContainer ?? document.body;
+  return ReactDOM.createPortal(children, container);
+};
+Portal.displayName = "Portal";
+var Portal_default = Portal;
 
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -18,18 +32,94 @@ function clsx() {
 var clsx_default = clsx;
 
 // src/components/Tooltip/Tooltip.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var OFFSET = 12;
+var SHOW_DELAY = 300;
 var Tooltip = (props) => {
   const {
-    type = "primary",
+    type = "dark",
+    title,
     description,
-    children
+    children,
+    disabled = false
   } = props;
-  const iconRef = React.useRef(null);
-  return /* @__PURE__ */ jsxs("div", { className: "lib-xplat-tooltip", children: [
-    /* @__PURE__ */ jsx("div", { className: "tooltip-content", ref: iconRef, children: children || "Tooltip" }),
-    /* @__PURE__ */ jsx("div", { className: clsx_default("tooltip-wrapper", type), children: description })
-  ] });
+  const triggerRef = React2.useRef(null);
+  const tooltipRef = React2.useRef(null);
+  const [visible, setVisible] = React2.useState(false);
+  const [pos, setPos] = React2.useState({ left: 0, top: 0 });
+  const delayTimer = React2.useRef(0);
+  const calculatePos = React2.useCallback((clientX, clientY) => {
+    const el = tooltipRef.current;
+    if (!el) return;
+    const w = el.offsetWidth;
+    const h = el.offsetHeight;
+    const vw = window.innerWidth;
+    let left = clientX + OFFSET;
+    let top = clientY - h - OFFSET;
+    if (left + w > vw - 8) left = clientX - w - OFFSET;
+    if (top < 8) top = clientY + OFFSET;
+    if (left < 8) left = 8;
+    setPos({ left, top });
+  }, []);
+  const handleMouseEnter = React2.useCallback(() => {
+    if (disabled) return;
+    delayTimer.current = window.setTimeout(() => {
+      setVisible(true);
+    }, SHOW_DELAY);
+  }, [disabled]);
+  const handleMouseMove = React2.useCallback((e) => {
+    if (!visible) return;
+    calculatePos(e.clientX, e.clientY);
+  }, [visible, calculatePos]);
+  const handleMouseLeave = React2.useCallback(() => {
+    window.clearTimeout(delayTimer.current);
+    setVisible(false);
+  }, []);
+  const handleClick = React2.useCallback(() => {
+    window.clearTimeout(delayTimer.current);
+    setVisible(false);
+  }, []);
+  const handleFocus = React2.useCallback(() => {
+    if (disabled) return;
+    setVisible(true);
+  }, [disabled]);
+  const handleBlur = React2.useCallback(() => {
+    setVisible(false);
+  }, []);
+  React2.useLayoutEffect(() => {
+    if (!visible || !triggerRef.current) return;
+    const rect = triggerRef.current.getBoundingClientRect();
+    calculatePos(rect.right, rect.top);
+  }, [visible, calculatePos]);
+  if (!title && !description) return /* @__PURE__ */ jsx2(Fragment, { children });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: triggerRef,
+      className: "lib-xplat-tooltip-trigger",
+      onMouseEnter: handleMouseEnter,
+      onMouseMove: handleMouseMove,
+      onMouseLeave: handleMouseLeave,
+      onClick: handleClick,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      children: [
+        children,
+        visible && /* @__PURE__ */ jsx2(Portal_default, { children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: tooltipRef,
+            className: clsx_default("lib-xplat-tooltip", type),
+            style: { position: "fixed", left: pos.left, top: pos.top },
+            children: [
+              title && /* @__PURE__ */ jsx2("div", { className: "tooltip-title", children: title }),
+              description && /* @__PURE__ */ jsx2("div", { className: "tooltip-desc", children: description })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
 };
 Tooltip.displayName = "Tooltip";
 var Tooltip_default = Tooltip;

package/dist/components/index.cjs

@@ -2380,15 +2380,11 @@ var useChartTooltip = (enabled) => {
     if (!rect) return;
     setTooltip({ visible: true, x: e.clientX - rect.left, y: e.clientY - rect.top, content });
   }, [enabled]);
-  const showAt = import_react6.default.useCallback((x, y, content) => {
-    if (!enabled) return;
-    setTooltip({ visible: true, x, y, content });
-  }, [enabled]);
   const hide = import_react6.default.useCallback(() => {
     cancelAnimationFrame(rafRef.current);
     setTooltip((prev) => ({ ...prev, visible: false }));
   }, []);
-  return { tooltip, show, showAt, hide, move, containerRef };
+  return { tooltip, show, hide, move, containerRef };
 };
 var GridLines = import_react6.default.memo(({ width, height, chartH, maxVal }) => /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(import_jsx_runtime307.Fragment, { children: [0, 0.25, 0.5, 0.75, 1].map((ratio) => {
   const y = PADDING.top + (1 - ratio) * chartH;
@@ -2453,7 +2449,7 @@ var useCrosshair = (seriesPoints, entries, labels, chartH) => {
   }, [entries, seriesPoints]);
   return { activeIndex, handleMouseMove, handleMouseLeave, tooltipContent, getTooltipAt };
 };
-var LineChart = import_react6.default.memo(({ data, labels, width, height, animate, onHover, onShowAt, onMove, onLeave }) => {
+var LineChart = import_react6.default.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
   const entries = import_react6.default.useMemo(() => Object.entries(data), [data]);
   const maxVal = import_react6.default.useMemo(() => {
     const allValues = entries.flatMap(([, v]) => v);
@@ -2493,9 +2489,8 @@ var LineChart = import_react6.default.memo(({ data, labels, width, height, anima
       className: "chart-svg",
       onMouseMove: (e) => {
         handleMouseMove(e);
-        if (activeIndex !== null && seriesPoints[0]?.[activeIndex]) {
-          const p = seriesPoints[0][activeIndex];
-          onShowAt(p.x, p.y, `${labels[activeIndex]} \u2014 ${getTooltipAt(activeIndex)}`);
+        if (activeIndex !== null) {
+          onHover(e, `${labels[activeIndex]} \u2014 ${getTooltipAt(activeIndex)}`);
         } else {
           onLeave();
         }
@@ -2563,7 +2558,7 @@ var LineChart = import_react6.default.memo(({ data, labels, width, height, anima
   );
 });
 LineChart.displayName = "LineChart";
-var CurveChart = import_react6.default.memo(({ data, labels, width, height, animate, onHover, onShowAt, onMove, onLeave }) => {
+var CurveChart = import_react6.default.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
   const entries = import_react6.default.useMemo(() => Object.entries(data), [data]);
   const maxVal = import_react6.default.useMemo(() => {
     const allValues = entries.flatMap(([, v]) => v);
@@ -2605,7 +2600,7 @@ var CurveChart = import_react6.default.memo(({ data, labels, width, height, anim
         handleMouseMove(e);
         if (activeIndex !== null && seriesPoints[0]?.[activeIndex]) {
           const p = seriesPoints[0][activeIndex];
-          onShowAt(p.x, p.y, `${labels[activeIndex]} \u2014 ${getTooltipAt(activeIndex)}`);
+          onHover(e, `${labels[activeIndex]} \u2014 ${getTooltipAt(activeIndex)}`);
         } else {
           onLeave();
         }
@@ -2673,7 +2668,7 @@ var CurveChart = import_react6.default.memo(({ data, labels, width, height, anim
   );
 });
 CurveChart.displayName = "CurveChart";
-var BarChart = import_react6.default.memo(({ data, labels, width, height, animate, onHover, onShowAt, onMove, onLeave }) => {
+var BarChart = import_react6.default.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
   const entries = import_react6.default.useMemo(() => Object.entries(data), [data]);
   const maxVal = import_react6.default.useMemo(() => {
     const allValues = entries.flatMap(([, v]) => v);
@@ -2723,7 +2718,8 @@ var BarChart = import_react6.default.memo(({ data, labels, width, height, animat
               transformOrigin: `${b.x + b.w / 2}px ${baseline}px`,
               animationDelay: `${delay}ms`
             } : void 0,
-            onMouseEnter: () => onShowAt(b.x + b.w / 2, b.y, `${key}: ${labels[i]} \u2014 ${b.v}`),
+            onMouseEnter: (e) => onHover(e, `${key}: ${labels[i]} \u2014 ${b.v}`),
+            onMouseMove: onMove,
             onMouseLeave: onLeave
           },
           `${di}-${i}`
@@ -2811,14 +2807,17 @@ var PieDonutChart = import_react6.default.memo(
         {
           d: s.d,
           fill: PIE_COLORS[(i + colorOffset) % PIE_COLORS.length],
-          className: "chart-slice"
+          className: "chart-slice",
+          onMouseEnter: (e) => onHover(e, `${s.label} \u2014 ${s.v.toLocaleString()} (${s.pct}%)`),
+          onMouseMove: onMove,
+          onMouseLeave: onLeave
         }
       ) }, i)) })
     ] });
   }
 );
 PieDonutChart.displayName = "PieDonutChart";
-var ChartTooltip = ({ x, y, containerWidth, containerHeight, children }) => {
+var ChartTooltip = ({ x, y, containerWidth, containerHeight, tooltipType, children }) => {
   const ref = import_react6.default.useRef(null);
   const [pos, setPos] = import_react6.default.useState({ left: 0, top: 0 });
   import_react6.default.useLayoutEffect(() => {
@@ -2833,13 +2832,20 @@ var ChartTooltip = ({ x, y, containerWidth, containerHeight, children }) => {
     if (left < 0) left = 0;
     setPos({ left, top });
   }, [x, y, containerWidth, containerHeight]);
-  return /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
+  const content = typeof children === "string" ? children : "";
+  const sepIdx = content.indexOf(" \u2014 ");
+  const title = sepIdx >= 0 ? content.slice(0, sepIdx) : content;
+  const desc = sepIdx >= 0 ? content.slice(sepIdx + 3) : "";
+  return /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)(
     "div",
     {
       ref,
-      className: "chart-tooltip chart-tooltip-show",
+      className: `chart-tooltip chart-tooltip-show chart-tooltip-${tooltipType}`,
       style: { left: pos.left, top: pos.top },
-      children
+      children: [
+        title && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("div", { className: "chart-tooltip-title", children: title }),
+        desc && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("div", { className: "chart-tooltip-desc", children: desc })
+      ]
     }
   );
 };
@@ -2882,8 +2888,8 @@ var ChartLegend = ({ data, labels, type }) => {
   }) });
 };
 var Chart = import_react6.default.memo((props) => {
-  const { type, data, labels, tooltip: showTooltip = true } = props;
-  const { tooltip, show, showAt, hide, move, containerRef } = useChartTooltip(showTooltip);
+  const { type, data, labels, tooltip: showTooltip = true, tooltipType = "dark" } = props;
+  const { tooltip, show, hide, move, containerRef } = useChartTooltip(showTooltip);
   const { width, height } = useChartSize(containerRef);
   const stableData = import_react6.default.useMemo(() => data, [JSON.stringify(data)]);
   const stableLabels = import_react6.default.useMemo(() => labels, [JSON.stringify(labels)]);
@@ -2891,13 +2897,13 @@ var Chart = import_react6.default.memo((props) => {
   const animate = useChartAnimation(containerRef, dataKey);
   const ready = width > 0 && height > 0;
   return /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)("div", { className: "lib-xplat-chart", ref: containerRef, children: [
-    ready && type === "line" && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(LineChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onShowAt: showAt, onMove: move, onLeave: hide }),
-    ready && type === "curve" && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(CurveChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onShowAt: showAt, onMove: move, onLeave: hide }),
-    ready && type === "bar" && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(BarChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onShowAt: showAt, onMove: move, onLeave: hide }),
-    ready && type === "pie" && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onShowAt: showAt, onMove: move, onLeave: hide }),
-    ready && type === "doughnut" && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, isDoughnut: true, onHover: show, onShowAt: showAt, onMove: move, onLeave: hide }),
-    ready && (type === "bar" || type === "pie" || type === "doughnut") && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(ChartLegend, { data: stableData, labels: stableLabels, type }),
-    tooltip.visible && tooltip.content && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(ChartTooltip, { x: tooltip.x, y: tooltip.y, containerWidth: width, containerHeight: height, children: tooltip.content })
+    ready && type === "line" && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(LineChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "curve" && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(CurveChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "bar" && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(BarChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "pie" && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "doughnut" && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, isDoughnut: true, onHover: show, onMove: move, onLeave: hide }),
+    ready && (type === "pie" || type === "doughnut") && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(ChartLegend, { data: stableData, labels: stableLabels, type }),
+    tooltip.visible && tooltip.content && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(ChartTooltip, { x: tooltip.x, y: tooltip.y, containerWidth: width, containerHeight: height, tooltipType, children: tooltip.content })
   ] });
 });
 Chart.displayName = "Chart";
@@ -5405,17 +5411,93 @@ ToastProvider.displayName = "ToastProvider";
 // src/components/Tooltip/Tooltip.tsx
 var import_react40 = __toESM(require("react"), 1);
 var import_jsx_runtime348 = require("react/jsx-runtime");
+var OFFSET = 12;
+var SHOW_DELAY = 300;
 var Tooltip = (props) => {
   const {
-    type = "primary",
+    type = "dark",
+    title,
     description,
-    children
+    children,
+    disabled = false
   } = props;
-  const iconRef = import_react40.default.useRef(null);
-  return /* @__PURE__ */ (0, import_jsx_runtime348.jsxs)("div", { className: "lib-xplat-tooltip", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime348.jsx)("div", { className: "tooltip-content", ref: iconRef, children: children || "Tooltip" }),
-    /* @__PURE__ */ (0, import_jsx_runtime348.jsx)("div", { className: clsx_default("tooltip-wrapper", type), children: description })
-  ] });
+  const triggerRef = import_react40.default.useRef(null);
+  const tooltipRef = import_react40.default.useRef(null);
+  const [visible, setVisible] = import_react40.default.useState(false);
+  const [pos, setPos] = import_react40.default.useState({ left: 0, top: 0 });
+  const delayTimer = import_react40.default.useRef(0);
+  const calculatePos = import_react40.default.useCallback((clientX, clientY) => {
+    const el = tooltipRef.current;
+    if (!el) return;
+    const w = el.offsetWidth;
+    const h = el.offsetHeight;
+    const vw = window.innerWidth;
+    let left = clientX + OFFSET;
+    let top = clientY - h - OFFSET;
+    if (left + w > vw - 8) left = clientX - w - OFFSET;
+    if (top < 8) top = clientY + OFFSET;
+    if (left < 8) left = 8;
+    setPos({ left, top });
+  }, []);
+  const handleMouseEnter = import_react40.default.useCallback(() => {
+    if (disabled) return;
+    delayTimer.current = window.setTimeout(() => {
+      setVisible(true);
+    }, SHOW_DELAY);
+  }, [disabled]);
+  const handleMouseMove = import_react40.default.useCallback((e) => {
+    if (!visible) return;
+    calculatePos(e.clientX, e.clientY);
+  }, [visible, calculatePos]);
+  const handleMouseLeave = import_react40.default.useCallback(() => {
+    window.clearTimeout(delayTimer.current);
+    setVisible(false);
+  }, []);
+  const handleClick = import_react40.default.useCallback(() => {
+    window.clearTimeout(delayTimer.current);
+    setVisible(false);
+  }, []);
+  const handleFocus = import_react40.default.useCallback(() => {
+    if (disabled) return;
+    setVisible(true);
+  }, [disabled]);
+  const handleBlur = import_react40.default.useCallback(() => {
+    setVisible(false);
+  }, []);
+  import_react40.default.useLayoutEffect(() => {
+    if (!visible || !triggerRef.current) return;
+    const rect = triggerRef.current.getBoundingClientRect();
+    calculatePos(rect.right, rect.top);
+  }, [visible, calculatePos]);
+  if (!title && !description) return /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(import_jsx_runtime348.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime348.jsxs)(
+    "div",
+    {
+      ref: triggerRef,
+      className: "lib-xplat-tooltip-trigger",
+      onMouseEnter: handleMouseEnter,
+      onMouseMove: handleMouseMove,
+      onMouseLeave: handleMouseLeave,
+      onClick: handleClick,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      children: [
+        children,
+        visible && /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(Portal_default, { children: /* @__PURE__ */ (0, import_jsx_runtime348.jsxs)(
+          "div",
+          {
+            ref: tooltipRef,
+            className: clsx_default("lib-xplat-tooltip", type),
+            style: { position: "fixed", left: pos.left, top: pos.top },
+            children: [
+              title && /* @__PURE__ */ (0, import_jsx_runtime348.jsx)("div", { className: "tooltip-title", children: title }),
+              description && /* @__PURE__ */ (0, import_jsx_runtime348.jsx)("div", { className: "tooltip-desc", children: description })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
 };
 Tooltip.displayName = "Tooltip";
 var Tooltip_default = Tooltip;

package/dist/components/index.css

@@ -2034,17 +2034,37 @@
   position: absolute;
   z-index: 10;
   padding: var(--spacing-space-3);
-  background-color: var(--semantic-surface-neutral-strong);
-  color: var(--semantic-text-inverse);
-  font-size: 12px;
-  line-height: 18px;
-  font-weight: 500;
   border-radius: var(--spacing-radius-md);
   max-width: 240px;
   pointer-events: none;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
   animation: chart-tooltip-in 120ms ease-out;
 }
+.lib-xplat-chart .chart-tooltip .chart-tooltip-title {
+  font-size: 13px;
+  line-height: 18px;
+  font-weight: 400;
+}
+.lib-xplat-chart .chart-tooltip .chart-tooltip-desc {
+  font-size: 12px;
+  line-height: 18px;
+  font-weight: 400;
+}
+.lib-xplat-chart .chart-tooltip.chart-tooltip-dark {
+  background-color: var(--semantic-surface-neutral-strong);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+.lib-xplat-chart .chart-tooltip.chart-tooltip-dark .chart-tooltip-title,
+.lib-xplat-chart .chart-tooltip.chart-tooltip-dark .chart-tooltip-desc {
+  color: var(--semantic-text-inverse);
+}
+.lib-xplat-chart .chart-tooltip.chart-tooltip-light {
+  background-color: var(--semantic-surface-neutral-default);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+.lib-xplat-chart .chart-tooltip.chart-tooltip-light .chart-tooltip-title,
+.lib-xplat-chart .chart-tooltip.chart-tooltip-light .chart-tooltip-desc {
+  color: var(--semantic-text-subtle);
+}
 .lib-xplat-chart .chart-legend {
   display: flex;
   flex-wrap: wrap;
@@ -4435,50 +4455,50 @@
 }
 
 /* src/components/Tooltip/tooltip.scss */
+.lib-xplat-tooltip-trigger {
+  display: inline-flex;
+}
 .lib-xplat-tooltip {
-  width: fit-content;
-  position: relative;
+  z-index: 1100;
+  padding: var(--spacing-space-3);
+  border-radius: var(--spacing-radius-md);
+  max-width: 240px;
+  pointer-events: none;
+  animation: tooltip-show 120ms ease-out;
 }
-.lib-xplat-tooltip > .tooltip-content {
-  width: fit-content;
-  height: fit-content;
+.lib-xplat-tooltip .tooltip-title {
+  font-size: 13px;
+  line-height: 18px;
+  font-weight: 400;
 }
-.lib-xplat-tooltip > .tooltip-wrapper {
-  position: absolute;
-  transform: translateX(-50%) scale(0.5);
-  left: 50%;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
-  white-space: nowrap;
-  border-radius: var(--spacing-radius-sm);
-  padding: var(--spacing-space-2) var(--spacing-space-2);
-  opacity: 0;
-  pointer-events: none;
-  bottom: 100%;
-  transition: opacity 0.12s ease, transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
+.lib-xplat-tooltip .tooltip-desc {
+  font-size: 12px;
+  line-height: 18px;
+  font-weight: 400;
 }
-.lib-xplat-tooltip > .tooltip-wrapper.primary {
-  color: var(--semantic-text-inverse);
+.lib-xplat-tooltip.dark {
   background-color: var(--semantic-surface-neutral-strong);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
-.lib-xplat-tooltip > .tooltip-wrapper.secondary {
-  background-color: var(--semantic-surface-neutral-default);
-  color: var(--semantic-text-strong);
+.lib-xplat-tooltip.dark .tooltip-title,
+.lib-xplat-tooltip.dark .tooltip-desc {
+  color: var(--semantic-text-inverse);
 }
-.lib-xplat-tooltip.tooltip-bottom > .tooltip-wrapper {
-  top: 100%;
-  bottom: auto;
-  transform-origin: top center;
+.lib-xplat-tooltip.light {
+  background-color: var(--semantic-surface-neutral-default);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
 }
-.lib-xplat-tooltip.tooltip-top > .tooltip-wrapper {
-  bottom: 100%;
-  top: auto;
-  transform-origin: bottom center;
+.lib-xplat-tooltip.light .tooltip-title,
+.lib-xplat-tooltip.light .tooltip-desc {
+  color: var(--semantic-text-subtle);
 }
-.lib-xplat-tooltip:hover > .tooltip-content + .tooltip-wrapper,
-.lib-xplat-tooltip > .tooltip-content:hover + .tooltip-wrapper {
-  opacity: 1;
-  pointer-events: auto;
-  transform: translateX(-50%) scale(1);
+@keyframes tooltip-show {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 /* src/components/Video/video.scss */