@sia.soul/sia-react-ui 0.1.23 → 0.1.25

package/dist/{chunk-OKP4DIQH.js → chunk-TZROBD65.js}

@@ -1,9 +1,12 @@
 import {
   TextArea
-} from "./chunk-YT6E3X2K.js";
+} from "./chunk-YQDHCORW.js";
 import {
   Button
-} from "./chunk-TZGUBGA4.js";
+} from "./chunk-IYNS423D.js";
+import {
+  withTitleTooltip
+} from "./chunk-RAO3JHDL.js";
 
 // src/components/ChartWhirlingLoading.tsx
 import { useEffect, useState } from "react";
@@ -73,7 +76,7 @@ function ChartBrush({ bounds, onSelect, onCancel, selectionShape = "band", selec
         tabIndex: 0,
         role: "group",
         "aria-label": "\u62D6\u52A8\u6846\u9009\u7F29\u653E\uFF0CEscape\u53D6\u6D88",
-        ...bounds,
+        ...withTitleTooltip(bounds),
         fill: "transparent",
         style: { cursor: "crosshair", touchAction: "none", pointerEvents: "all" },
         onKeyDown: (event) => {
@@ -327,27 +330,27 @@ function ChartNodeTimeline({ labels, dates, value, onChange, autoPlay = false, p
     return nearestTimelineIndex(ratios, (p.x - start) / (end - start));
   };
   return /* @__PURE__ */ jsxs3("g", { "data-chart-node-timeline": "", "aria-label": "\u56FE\u8868\u65F6\u95F4\u8F74", fontSize: 12, fill: "#666", children: [
-    /* @__PURE__ */ jsxs3("g", { role: "button", tabIndex: 0, "aria-label": "\u4E0A\u4E00\u5E74", ...activate(() => step(-1)), children: [
+    /* @__PURE__ */ jsxs3("g", { role: "button", tabIndex: 0, "aria-label": "\u4E0A\u4E00\u5E74", ...withTitleTooltip(activate(() => step(-1))), children: [
       /* @__PURE__ */ jsx4("rect", { x, y: y - 14, width: 24, height: 28, fill: "transparent" }),
       /* @__PURE__ */ jsx4("path", { d: `M${x + 17} ${y - 7} L${x + 7} ${y} L${x + 17} ${y + 7}`, fill: "none", stroke: "#666", strokeWidth: 2 })
     ] }),
-    /* @__PURE__ */ jsxs3("g", { role: "button", tabIndex: 0, "aria-label": playing ? "\u6682\u505C\u65F6\u95F4\u8F74" : "\u64AD\u653E\u65F6\u95F4\u8F74", ...activate(() => {
+    /* @__PURE__ */ jsxs3("g", { role: "button", tabIndex: 0, "aria-label": playing ? "\u6682\u505C\u65F6\u95F4\u8F74" : "\u64AD\u653E\u65F6\u95F4\u8F74", ...withTitleTooltip(activate(() => {
       cancelPending();
       if (playing) setPlaying(false);
       else {
         onChange((shown + 1) % labels.length);
         setPlaying(true);
       }
-    }), children: [
+    })), children: [
       /* @__PURE__ */ jsx4("rect", { x: x + 30, y: y - 14, width: 24, height: 28, fill: "transparent" }),
       playing ? /* @__PURE__ */ jsx4("path", { d: `M${x + 37} ${y - 7} V${y + 7} M${x + 47} ${y - 7} V${y + 7}`, fill: "none", stroke: "#666", strokeWidth: 3 }) : /* @__PURE__ */ jsx4("path", { d: `M${x + 36} ${y - 8} L${x + 50} ${y} L${x + 36} ${y + 8} Z` })
     ] }),
-    /* @__PURE__ */ jsxs3("g", { role: "button", tabIndex: 0, "aria-label": "\u4E0B\u4E00\u5E74", ...activate(() => step(1)), children: [
+    /* @__PURE__ */ jsxs3("g", { role: "button", tabIndex: 0, "aria-label": "\u4E0B\u4E00\u5E74", ...withTitleTooltip(activate(() => step(1))), children: [
       /* @__PURE__ */ jsx4("rect", { x: x + 60, y: y - 14, width: 24, height: 28, fill: "transparent" }),
       /* @__PURE__ */ jsx4("path", { d: `M${x + 67} ${y - 7} L${x + 77} ${y} L${x + 67} ${y + 7}`, fill: "none", stroke: "#666", strokeWidth: 2 })
     ] }),
     /* @__PURE__ */ jsx4("line", { x1: start, x2: end, y1: y, y2: y, stroke: "#666", strokeWidth: 1, strokeDasharray: "5 5" }),
-    labels.map((label, index) => /* @__PURE__ */ jsxs3("g", { role: "button", tabIndex: 0, "aria-label": `\u5E74\u4EFD ${label}`, "aria-pressed": value === index, ...activate(() => select(index)), children: [
+    labels.map((label, index) => /* @__PURE__ */ jsxs3("g", { role: "button", tabIndex: 0, "aria-label": `\u5E74\u4EFD ${label}`, "aria-pressed": value === index, ...withTitleTooltip(activate(() => select(index))), children: [
       /* @__PURE__ */ jsx4("rect", { x: position(index) - 20, y: y - 12, width: 40, height: 40, fill: "transparent" }),
       /* @__PURE__ */ jsx4("path", { "data-timeline-node": index, d: `M${position(index)} ${y - 4} L${position(index) + 4} ${y} L${position(index)} ${y + 4} L${position(index) - 4} ${y} Z`, fill: "#fff", stroke: "#666" }),
       /* @__PURE__ */ jsx4("text", { x: position(index), y: y + 24, textAnchor: "middle", children: label })
@@ -489,10 +492,10 @@ function ChartVerticalRange({ min, max, x, y, length, thickness, colors, range,
     /* @__PURE__ */ jsx5("text", { x, y: y - 5, children: endLabels?.[1] ?? max }),
     /* @__PURE__ */ jsx5("rect", { x, y, width: thickness, height: Math.max(0, position(high) - y), fill: "#ccc", pointerEvents: "none" }),
     /* @__PURE__ */ jsx5("rect", { x, y: position(low), width: thickness, height: Math.max(0, y + length - position(low)), fill: "#ccc", pointerEvents: "none" }),
-    /* @__PURE__ */ jsx5("rect", { "data-range-selection": "", x, y: position(high), width: thickness, height: Math.max(0, position(low) - position(high)), fill: "transparent", style: { cursor: readOnly ? "default" : "move" }, ...handlers(2) }),
+    /* @__PURE__ */ jsx5("rect", { "data-range-selection": "", x, y: position(high), width: thickness, height: Math.max(0, position(low) - position(high)), fill: "transparent", style: { cursor: readOnly ? "default" : "move" }, ...withTitleTooltip(handlers(2)) }),
     !readOnly && [0, 1].map((index) => {
       const value = index === 0 ? low : high, py = position(value), direction = index === 0 ? 1 : -1;
-      return /* @__PURE__ */ jsxs4("g", { role: "slider", "aria-label": `\u503C\u57DF${index === 0 ? "\u4E0B\u9650" : "\u4E0A\u9650"}`, "aria-valuemin": index === 0 ? min : low, "aria-valuemax": index === 0 ? high : max, "aria-valuenow": value, "aria-orientation": "vertical", tabIndex: 0, style: { cursor: "ns-resize", pointerEvents: "all" }, ...handlers(index), onKeyDown: (event) => {
+      return /* @__PURE__ */ jsxs4("g", { role: "slider", "aria-label": `\u503C\u57DF${index === 0 ? "\u4E0B\u9650" : "\u4E0A\u9650"}`, "aria-valuemin": index === 0 ? min : low, "aria-valuemax": index === 0 ? high : max, "aria-valuenow": value, "aria-orientation": "vertical", tabIndex: 0, style: { cursor: "ns-resize", pointerEvents: "all" }, ...withTitleTooltip(handlers(index)), onKeyDown: (event) => {
         const step = span / 100;
         const next = event.key === "Home" ? min : event.key === "End" ? max : ["ArrowUp", "ArrowRight"].includes(event.key) ? value + step : ["ArrowDown", "ArrowLeft"].includes(event.key) ? value - step : void 0;
         if (next !== void 0) {
@@ -579,10 +582,10 @@ function ChartHorizontalRange({ min, max, x, y, length, thickness, colors, range
     /* @__PURE__ */ jsx6("text", { x: x + length + 10, y: y + thickness / 2, dominantBaseline: "central", children: endLabels?.[0] ?? min }),
     /* @__PURE__ */ jsx6("rect", { x, y, width: Math.max(0, position(high) - x), height: thickness, fill: "#ccc", pointerEvents: "none" }),
     /* @__PURE__ */ jsx6("rect", { x: position(low), y, width: Math.max(0, x + length - position(low)), height: thickness, fill: "#ccc", pointerEvents: "none" }),
-    /* @__PURE__ */ jsx6("rect", { "data-range-selection": "", x: position(high), y, width: Math.max(0, position(low) - position(high)), height: thickness, fill: "transparent", style: { cursor: "move" }, ...handlers(2) }),
+    /* @__PURE__ */ jsx6("rect", { "data-range-selection": "", x: position(high), y, width: Math.max(0, position(low) - position(high)), height: thickness, fill: "transparent", style: { cursor: "move" }, ...withTitleTooltip(handlers(2)) }),
     [0, 1].map((index) => {
       const value = index === 0 ? low : high, px = position(value), direction = index === 0 ? 1 : -1;
-      return /* @__PURE__ */ jsxs5("g", { role: "slider", "aria-label": "\u503C\u57DF" + (index === 0 ? "\u4E0B\u9650" : "\u4E0A\u9650"), "aria-valuemin": index === 0 ? min : low, "aria-valuemax": index === 0 ? high : max, "aria-valuenow": value, "aria-orientation": "horizontal", tabIndex: 0, style: { cursor: "ew-resize", pointerEvents: "all" }, ...handlers(index), onKeyDown: (event) => {
+      return /* @__PURE__ */ jsxs5("g", { role: "slider", "aria-label": "\u503C\u57DF" + (index === 0 ? "\u4E0B\u9650" : "\u4E0A\u9650"), "aria-valuemin": index === 0 ? min : low, "aria-valuemax": index === 0 ? high : max, "aria-valuenow": value, "aria-orientation": "horizontal", tabIndex: 0, style: { cursor: "ew-resize", pointerEvents: "all" }, ...withTitleTooltip(handlers(index)), onKeyDown: (event) => {
         const step = span / 100, next = event.key === "Home" ? min : event.key === "End" ? max : ["ArrowUp", "ArrowLeft"].includes(event.key) ? value + step : ["ArrowDown", "ArrowRight"].includes(event.key) ? value - step : void 0;
         if (next !== void 0) {
           event.preventDefault();
@@ -744,7 +747,7 @@ function toCssSize(value, fallback) {
 var ChartComposite = forwardRef(function ChartComposite2({ layers, width = "100%", height = 320, ariaLabel = "\u7EC4\u5408\u56FE\u8868", className = "", style, ...props }, ref) {
   const host = useRef6(null);
   useImperativeHandle(ref, () => ({ toSvgString: () => host.current ? serializeChartComposite(host.current) : null, saveAsImage: (filename) => saveCompositeImage(host.current ? serializeChartComposite(host.current) : null, filename) }), []);
-  return /* @__PURE__ */ jsx7("div", { ...props, ref: host, className: `sia-chart-composite${className ? ` ${className}` : ""}`, style: { ...style, width: toCssSize(width, "100%"), height: toCssSize(height, "320px") }, role: "group", "aria-label": ariaLabel, children: layers.map((layer, index) => /* @__PURE__ */ jsx7("div", { className: "sia-chart-composite__layer", style: { left: layer.left ?? 0, top: layer.top ?? 0, width: layer.width ?? "100%", height: layer.height ?? "100%", zIndex: layer.zIndex ?? index, pointerEvents: layer.pointerEvents }, children: layer.content }, layer.key ?? index)) });
+  return /* @__PURE__ */ jsx7("div", { ...withTitleTooltip(props), ref: host, className: `sia-chart-composite${className ? ` ${className}` : ""}`, style: { ...style, width: toCssSize(width, "100%"), height: toCssSize(height, "320px") }, role: "group", "aria-label": ariaLabel, children: layers.map((layer, index) => /* @__PURE__ */ jsx7("div", { className: "sia-chart-composite__layer", style: { left: layer.left ?? 0, top: layer.top ?? 0, width: layer.width ?? "100%", height: layer.height ?? "100%", zIndex: layer.zIndex ?? index, pointerEvents: layer.pointerEvents }, children: layer.content }, layer.key ?? index)) });
 });
 var useTooltipLayoutEffect = typeof window === "undefined" ? useEffect6 : useLayoutEffect;
 function ChartTooltip({ open, left, top, children, enterable = false, inheritTextStyle = false, placement = "above", className = "", style, ...props }) {
@@ -767,7 +770,7 @@ function ChartTooltip({ open, left, top, children, enterable = false, inheritTex
   return /* @__PURE__ */ jsx7(
     "div",
     {
-      ...props,
+      ...withTitleTooltip(props),
       ref: elementRef,
       className: `sia-chart__tooltip${inheritTextStyle ? " sia-chart__tooltip--inherit-text" : ""}${className ? ` ${className}` : ""}`,
       role: "tooltip",
@@ -846,7 +849,7 @@ function ChartToolbox({
         {
           type: "button",
           className: "sia-chart-toolbox__button",
-          title: TOOLBOX_LABELS[feature],
+          ...withTitleTooltip({ title: TOOLBOX_LABELS[feature] }),
           "aria-label": TOOLBOX_LABELS[feature],
           "aria-pressed": feature === "mark" ? markActive : feature === "dataZoom" ? zoomActive : void 0,
           onClick: featureActions[feature],
@@ -854,9 +857,9 @@ function ChartToolbox({
         }
       ),
       feature === "mark" ? /* @__PURE__ */ jsxs6(Fragment2, { children: [
-        /* @__PURE__ */ jsx7("button", { type: "button", className: "sia-chart-toolbox__button", "aria-label": "\u64A4\u9500\u6807\u7EBF", title: "\u64A4\u9500\u6807\u7EBF", disabled: !markCount, onClick: onMarkUndo, children: /* @__PURE__ */ jsx7(ToolboxIcon, { children: /* @__PURE__ */ jsx7("path", { d: "M4 8h10a6 6 0 0 1 0 12M4 8l5-5M4 8l5 5" }) }) }),
-        /* @__PURE__ */ jsx7("button", { type: "button", className: "sia-chart-toolbox__button", "aria-label": "\u6E05\u7A7A\u6807\u7EBF", title: "\u6E05\u7A7A\u6807\u7EBF", disabled: !markCount, onClick: onMarkClear, children: /* @__PURE__ */ jsx7(ToolboxIcon, { children: /* @__PURE__ */ jsx7("path", { d: "M4 6h16M9 6V3h6v3M6 6l1 15h10l1-15M10 10v7M14 10v7" }) }) })
-      ] }) : feature === "dataZoom" && onZoomBack ? /* @__PURE__ */ jsx7("button", { type: "button", className: "sia-chart-toolbox__button", "aria-label": "\u533A\u57DF\u7F29\u653E\u540E\u9000", title: "\u533A\u57DF\u7F29\u653E\u540E\u9000", disabled: zoomBackDisabled, onClick: onZoomBack, children: /* @__PURE__ */ jsx7(ToolboxIcon, { children: /* @__PURE__ */ jsx7("path", { d: "M4 8h10a6 6 0 0 1 0 12M4 8l5-5M4 8l5 5" }) }) }) : null
+        /* @__PURE__ */ jsx7("button", { type: "button", className: "sia-chart-toolbox__button", "aria-label": "\u64A4\u9500\u6807\u7EBF", ...withTitleTooltip({ title: "\u64A4\u9500\u6807\u7EBF" }), disabled: !markCount, onClick: onMarkUndo, children: /* @__PURE__ */ jsx7(ToolboxIcon, { children: /* @__PURE__ */ jsx7("path", { d: "M4 8h10a6 6 0 0 1 0 12M4 8l5-5M4 8l5 5" }) }) }),
+        /* @__PURE__ */ jsx7("button", { type: "button", className: "sia-chart-toolbox__button", "aria-label": "\u6E05\u7A7A\u6807\u7EBF", ...withTitleTooltip({ title: "\u6E05\u7A7A\u6807\u7EBF" }), disabled: !markCount, onClick: onMarkClear, children: /* @__PURE__ */ jsx7(ToolboxIcon, { children: /* @__PURE__ */ jsx7("path", { d: "M4 6h16M9 6V3h6v3M6 6l1 15h10l1-15M10 10v7M14 10v7" }) }) })
+      ] }) : feature === "dataZoom" && onZoomBack ? /* @__PURE__ */ jsx7("button", { type: "button", className: "sia-chart-toolbox__button", "aria-label": "\u533A\u57DF\u7F29\u653E\u540E\u9000", ...withTitleTooltip({ title: "\u533A\u57DF\u7F29\u653E\u540E\u9000" }), disabled: zoomBackDisabled, onClick: onZoomBack, children: /* @__PURE__ */ jsx7(ToolboxIcon, { children: /* @__PURE__ */ jsx7("path", { d: "M4 8h10a6 6 0 0 1 0 12M4 8l5-5M4 8l5 5" }) }) }) : null
     ] }, feature)),
     magicTypes.map((type) => /* @__PURE__ */ jsx7(
       "button",
@@ -865,7 +868,7 @@ function ChartToolbox({
         className: "sia-chart-toolbox__button sia-chart-toolbox__magic",
         "aria-pressed": activeMagicTypes ? activeMagicTypes.includes(type) : activeMagicType === type,
         "aria-label": `\u5207\u6362\u4E3A${{ line: "\u6298\u7EBF\u56FE", bar: "\u67F1\u72B6\u56FE", stack: "\u5806\u79EF", tiled: "\u5E73\u94FA" }[type] ?? type}`,
-        title: `\u5207\u6362\u4E3A${type}`,
+        ...withTitleTooltip({ title: `\u5207\u6362\u4E3A${type}` }),
         onClick: () => onMagicTypeChange?.(type),
         children: ["line", "bar", "stack", "tiled"].includes(type) ? /* @__PURE__ */ jsx7(ToolboxIcon, { children: type === "line" ? /* @__PURE__ */ jsx7("path", { d: "M3 3v18h18M5 16l4-9 5 6 6-10" }) : type === "bar" ? /* @__PURE__ */ jsx7("path", { d: "M3 3v18h18M7 18V10h2v8M12 18V5h2v13M17 18V8h2v10" }) : type === "stack" ? /* @__PURE__ */ jsx7("path", { d: "M4 4h16v4H4zM4 10h16v4H4zM4 16h16v4H4z" }) : /* @__PURE__ */ jsx7("path", { d: "M4 4h4v16H4zM10 4h4v16h-4zM16 4h4v16h-4z" }) }) : type
       },
@@ -1034,7 +1037,7 @@ var SiaChart = forwardRef(function SiaChart2({
   return /* @__PURE__ */ jsx7(ChartContext.Provider, { value: context, children: /* @__PURE__ */ jsxs6(
     "div",
     {
-      ...rest,
+      ...withTitleTooltip(rest),
       ref: hostRef,
       className: `sia-chart${loading ? " sia-chart--loading" : ""}${animation ? " sia-chart--animated" : ""}${className ? ` ${className}` : ""}`,
       style: rootStyle,
@@ -1043,7 +1046,7 @@ var SiaChart = forwardRef(function SiaChart2({
         /* @__PURE__ */ jsxs6(
           "svg",
           {
-            ...svgProps,
+            ...withTitleTooltip(svgProps),
             ref: svgRef,
             className: `sia-chart__svg${svgProps?.className ? ` ${svgProps.className}` : ""}`,
             viewBox: `0 0 ${viewBoxSize[0]} ${viewBoxSize[1]}`,
@@ -1187,7 +1190,7 @@ function ChartMark({ tooltip, tooltipPoint, label, onPointerMove, onPointerLeave
   return /* @__PURE__ */ jsx7(
     "g",
     {
-      ...props,
+      ...withTitleTooltip(props),
       className: `sia-chart__mark${props.className ? ` ${props.className}` : ""}`,
       tabIndex: props.tabIndex ?? 0,
       role: "graphics-symbol",
@@ -1456,7 +1459,7 @@ function ChartTimeline({ labels, value, onChange, autoPlay = false, playInterval
     }, Math.max(120, playInterval));
     return () => window.clearInterval(timer);
   }, [labels.length, loop, onChange, playInterval, playing, value]);
-  return /* @__PURE__ */ jsxs6("div", { ...props, className: `sia-chart-timeline${className ? ` ${className}` : ""}`, children: [
+  return /* @__PURE__ */ jsxs6("div", { ...withTitleTooltip(props), className: `sia-chart-timeline${className ? ` ${className}` : ""}`, children: [
     /* @__PURE__ */ jsx7("button", { type: "button", "aria-label": playing ? "\u6682\u505C\u65F6\u95F4\u8F74" : "\u64AD\u653E\u65F6\u95F4\u8F74", onClick: () => setPlaying((current) => !current), children: playing ? "\u2161" : "\u25B6" }),
     /* @__PURE__ */ jsx7("input", { "aria-label": "\u56FE\u8868\u65F6\u95F4\u8F74", type: "range", min: 0, max: Math.max(0, labels.length - 1), value: Math.min(value, Math.max(0, labels.length - 1)), onChange: (event) => onChange(Number(event.target.value)) }),
     /* @__PURE__ */ jsx7("output", { children: labels[value] ?? "" })
@@ -1828,7 +1831,7 @@ function SvgMapPlot({ source, name, data, x, y, width, height, domain, range = d
   const scale = Math.min(width / map.width, height / map.height), left = x + (width - map.width * scale) / 2, top = y + (height - map.height * scale) / 2;
   const project = (point) => [left + (point[0] - map.x) * scale, top + (point[1] - map.y) * scale];
   const markColor = (value) => chartColorRamp(colors, (Math.max(domain[0], Math.min(domain[1], value)) - domain[0]) / Math.max(1, domain[1] - domain[0]));
-  return /* @__PURE__ */ jsxs9("g", { ref: control.host, ...control.handlers, "data-svg-map": name, tabIndex: roam ? 0 : void 0, role: "group", "aria-label": `${name}\u6F2B\u6E38`, style: { touchAction: "none" }, children: [
+  return /* @__PURE__ */ jsxs9("g", { ref: control.host, ...withTitleTooltip(control.handlers), "data-svg-map": name, tabIndex: roam ? 0 : void 0, role: "group", "aria-label": `${name}\u6F2B\u6E38`, style: { touchAction: "none" }, children: [
     roam ? /* @__PURE__ */ jsx12("rect", { x, y, width, height, fill: "transparent" }) : null,
     /* @__PURE__ */ jsxs9("g", { "data-svg-map-transform": "", transform: `translate(${control.view.x} ${control.view.y}) scale(${control.view.scale})`, children: [
       /* @__PURE__ */ jsxs9("g", { transform: `translate(${left} ${top}) scale(${scale}) translate(${-map.x} ${-map.y})`, children: [
@@ -4290,7 +4293,7 @@ var LineChart = forwardRef2(function LineChart2({ calculableMode = "resize", onT
   const PLOT2 = plot;
   const legend = useLegendSelection(series.map((item) => item.name), legendSelected, onLegendSelectionChange);
   const [zoomValue, setZoomValue] = useZoom(zoom, defaultZoom, onZoomChange);
-  const inlineZoom = dataZoom && zoomControlBounds ? /* @__PURE__ */ jsx30("foreignObject", { className: "sia-chart__inline-zoom sia-chart__inline-zoom--compact", ...zoomControlBounds, children: /* @__PURE__ */ jsx30(ChartDataZoom, { handleLabels: [categories[Math.min(categories.length - 1, Math.floor(Math.min(...zoomValue) / 100 * categories.length))] ?? "", categories[Math.max(0, Math.ceil(Math.max(...zoomValue) / 100 * categories.length) - 1)] ?? ""], shadowBounds: zoomControlBounds, panEnabled: zoomPan, value: zoomValue, dataShadow: series[0]?.data.map(lineValue), onChange: setZoomValue }) }) : null;
+  const inlineZoom = dataZoom && zoomControlBounds ? /* @__PURE__ */ jsx30("foreignObject", { className: "sia-chart__inline-zoom sia-chart__inline-zoom--compact", ...withTitleTooltip(zoomControlBounds), children: /* @__PURE__ */ jsx30(ChartDataZoom, { handleLabels: [categories[Math.min(categories.length - 1, Math.floor(Math.min(...zoomValue) / 100 * categories.length))] ?? "", categories[Math.max(0, Math.ceil(Math.max(...zoomValue) / 100 * categories.length) - 1)] ?? ""], shadowBounds: zoomControlBounds, panEnabled: zoomPan, value: zoomValue, dataShadow: series[0]?.data.map(lineValue), onChange: setZoomValue }) }) : null;
   const [zoomBrushActive, setZoomBrushActive] = useState28(false);
   const [zoomHistory, setZoomHistory] = useState28(() => dataZoom ? [defaultZoom ?? zoom ?? [0, 100]] : []);
   const zoomBrush = dataZoom && zoomBrushActive ? { minSelectionSize: zoomMinSelectionSize, selectionStyle: zoomSelectionStyle, selectionShape: zoomSelectionShape, bounds: PLOT2, onCancel: () => setZoomBrushActive(false), onSelect: (range) => {
@@ -5917,7 +5920,7 @@ var MapChart = forwardRef2(function MapChart2({ overlayProjection, bundledLines,
     ];
   };
   return /* @__PURE__ */ jsxs21(SiaChart, { ...props, ref, toolbox: chartToolbox, empty: !collection?.features.length && !overlayProjection, ariaLabel: props.ariaLabel ?? "\u5730\u56FE", children: [
-    /* @__PURE__ */ jsxs21("g", { ref: roamControl.host, ...roamControl.handlers, "data-map-viewport": true, tabIndex: roam ? 0 : void 0, role: roam ? "group" : void 0, "aria-label": roam ? "\u5730\u56FE\u6F2B\u6E38\uFF1A\u62D6\u52A8\u5E73\u79FB\u3001\u6EDA\u8F6E\u7F29\u653E\u3001Home \u8FD8\u539F" : void 0, style: { touchAction: roam ? "none" : void 0 }, children: [
+    /* @__PURE__ */ jsxs21("g", { ref: roamControl.host, ...withTitleTooltip(roamControl.handlers), "data-map-viewport": true, tabIndex: roam ? 0 : void 0, role: roam ? "group" : void 0, "aria-label": roam ? "\u5730\u56FE\u6F2B\u6E38\uFF1A\u62D6\u52A8\u5E73\u79FB\u3001\u6EDA\u8F6E\u7F29\u653E\u3001Home \u8FD8\u539F" : void 0, style: { touchAction: roam ? "none" : void 0 }, children: [
       roam ? /* @__PURE__ */ jsx30("rect", { x: 0, y: 0, width: props.viewBoxSize?.[0] ?? 720, height: props.viewBoxSize?.[1] ?? 360, fill: "transparent", className: "sia-chart__map-roam-surface" }) : null,
       /* @__PURE__ */ jsxs21("g", { "data-map-transform": true, style: { display: showMap ? void 0 : "none" }, transform: `translate(${view.x} ${view.y}) scale(${view.scale})`, children: [
         collection?.features.map((feature, featureIndex) => {