hold command to freeze tooltip

src/components/map/Map.tsx

@@ -112,10 +112,11 @@ const Map: React.FC<MapProps> = ({ imageUrl, regions = [], cities = [], pois = [
 
             return { tooltipX, tooltipY };
         }
-        return { tooltipX: clientX, tooltipY: clientY };
+        return { tooltipX: clientX + 10, tooltipY: clientY + 10 };
     };
 
     const handleMouseEnterRegion = (event: React.MouseEvent<SVGPolygonElement>, region: MapRegion) => {
+        if (event.metaKey || event.ctrlKey) return;
         const { tooltipX, tooltipY } = setDynamicTooltipPosition(event.pageX, event.pageY);
         setTooltip({
             visible: true,
@@ -126,6 +127,7 @@ const Map: React.FC<MapProps> = ({ imageUrl, regions = [], cities = [], pois = [
     };
 
     const handleMouseEnterLocation = (event: React.MouseEvent<SVGGElement>, location: MapLocation) => {
+        if (event.metaKey || event.ctrlKey) return;
         const { tooltipX, tooltipY } = setDynamicTooltipPosition(event.clientX, event.clientY);
         setTooltip({
             visible: true,
@@ -136,6 +138,7 @@ const Map: React.FC<MapProps> = ({ imageUrl, regions = [], cities = [], pois = [
     };
 
     const handleMouseMove = (event: React.MouseEvent) => {
+        if (event.metaKey || event.ctrlKey) return;
         const { tooltipX, tooltipY } = setDynamicTooltipPosition(event.clientX, event.clientY);
         setTooltip(prev => ({
             ...prev,
@@ -144,7 +147,8 @@ const Map: React.FC<MapProps> = ({ imageUrl, regions = [], cities = [], pois = [
         }));
     };
 
-    const handleMouseLeave = () => {
+    const handleMouseLeave = (event: React.MouseEvent) => {
+        if (event.metaKey || event.ctrlKey) return;
         setTooltip({ visible: false, x: 0, y: 0, content: null });
     };
 

src/components/map/locations/Capital.tsx

@@ -5,7 +5,7 @@ interface CapitalProps {
     city: MapLocation;
     onMouseEnter: (event: React.MouseEvent<SVGGElement>, city: MapLocation) => void;
     onMouseMove: (event: React.MouseEvent<SVGGElement>) => void;
-    onMouseLeave: () => void;
+    onMouseLeave: (event: React.MouseEvent) => void;
 }
 
 const Capital: React.FC<CapitalProps> = ({ key, city, onMouseEnter, onMouseMove, onMouseLeave }) => (

src/components/map/locations/City.tsx

@@ -5,7 +5,7 @@ interface CityProps {
     city: MapLocation;
     onMouseEnter: (event: React.MouseEvent<SVGGElement>, city: MapLocation) => void;
     onMouseMove: (event: React.MouseEvent<SVGGElement>) => void;
-    onMouseLeave: () => void;
+    onMouseLeave: (event: React.MouseEvent) => void;
 }
 
 const City: React.FC<CityProps> = ({ key, city, onMouseEnter, onMouseMove, onMouseLeave }) => (

src/components/map/locations/Poi.tsx

@@ -5,7 +5,7 @@ interface PoiProps {
     poi: MapLocation;
     onMouseEnter: (event: React.MouseEvent<SVGGElement>, city: MapLocation) => void;
     onMouseMove: (event: React.MouseEvent<SVGGElement>) => void;
-    onMouseLeave: () => void;
+    onMouseLeave: (event: React.MouseEvent) => void;
 }
 
 const City: React.FC<PoiProps> = ({ key, poi, onMouseMove, onMouseLeave, onMouseEnter }) => (