feat: thêm tính năng hiển thị tooltip mẹo nhấn chuột phải

frontend/src/pages/TourDetailPage.tsx

@@ -8,8 +8,8 @@ import { AddMemberModal } from '../components/AddMemberModal';
 import { useConfirm } from '@/hooks/useConfirm';
 import { useNotification } from '@/hooks/useNotification';
 import { CommentModal } from '@/components/CommentModal';
-import { AddPhotoModal } from '@/components/AddPhotoModal';
+import { AddPhotoModal } from '@/components/AddPhotoModal'; 
-import { MapContainer, TileLayer, Marker, Popup, useMapEvents, Polyline, useMap } from 'react-leaflet';
+import { MapContainer, TileLayer, Marker, Popup, useMapEvents, Polyline, useMap, Tooltip } from 'react-leaflet';
 import _MarkerClusterGroup from 'react-leaflet-cluster';
 const MarkerClusterGroup = (_MarkerClusterGroup as any).default || _MarkerClusterGroup;
 import {
@@ -110,6 +110,47 @@ const MapRotationHandler = ({ rotation }: { rotation: number }) => {
   }, [rotation, map]);
   return null;
 };
+
+// Component Helper để hiển thị mẹo khi người dùng dừng chuột trên bản đồ quá 3 giây
+const MapHoverTip = ({ canEdit }: { canEdit: boolean }) => {
+  const [tipPos, setTipPos] = useState<L.LatLng | null>(null);
+  const [visible, setVisible] = useState(false);
+  const timerRef = React.useRef<any>(null);
+
+  useMapEvents({
+    mousemove: (e) => {
+      if (!canEdit) return;
+      setVisible(false);
+      setTipPos(e.latlng);
+      if (timerRef.current) clearTimeout(timerRef.current);
+      timerRef.current = setTimeout(() => {
+        setVisible(true);
+      }, 3000);
+    },
+    mousedown: () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+      setVisible(false);
+    },
+    dragstart: () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+      setVisible(false);
+    },
+    contextmenu: () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+      setVisible(false);
+    }
+  });
+
+  if (!visible || !tipPos) return null;
+
+  return (
+    <Marker position={tipPos} icon={L.divIcon({ className: 'opacity-0' })}>
+      <Tooltip direction="top" offset={[0, -10]} opacity={0.9} permanent>
+        <span className="text-[10px] font-bold text-blue-600 whitespace-nowrap">Mẹo: nhấn giữ chuột phải để ghim</span>
+      </Tooltip>
+    </Marker>
+  );
+};
 // Menu ngữ cảnh cho bản đồ
 const MapContextMenu = ({ onAction }: { onAction: (action: string, latlng: L.LatLng) => void }) => {
   const [menuPos, setMenuPos] = useState<{ x: number, y: number, latlng: L.LatLng } | null>(null);
@@ -1219,10 +1260,10 @@ export const TourDetailPage = ({
                   >
                     <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
                     {canEdit && !isPublicView && (
-                      <MapContextMenu 
+                      <>
-                        onAction={handleMapAction} 
+                        <MapHoverTip canEdit={canEdit} />
-                        onOpen={() => setRouteMenu(null)}
+                        <MapContextMenu onAction={handleMapAction} onOpen={() => setRouteMenu(null)} />
-                      />
+                      </>
                     )}
                     
                     {/* Tự động đóng khung Start và End khi dữ liệu thay đổi */}