From b939fc959dfc0b6799cfd4b1eb2a064b3dee4c4c Mon Sep 17 00:00:00 2001
From: 3dtours <yeunhiepanh.photo@gmail.com>
Date: Tue, 16 Jun 2026 08:35:48 +0700
Subject: [PATCH] =?UTF-8?q?Th=C3=AAm=20t=C3=ADnh=20n=C4=83ng=20hi=E1=BB=83?=
 =?UTF-8?q?n=20th=E1=BB=8B=20tooltip=20tr=C3=AAn=20bong=20b=C3=B3ng=20Tour?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/ExploreMap.tsx | 55 ++++++++++++++++++-------------
 1 file changed, 33 insertions(+), 22 deletions(-)

diff --git a/frontend/src/pages/ExploreMap.tsx b/frontend/src/pages/ExploreMap.tsx
index 7101aa0..e24d6b7 100644
--- a/frontend/src/pages/ExploreMap.tsx
+++ b/frontend/src/pages/ExploreMap.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { MapContainer, TileLayer, Marker, Popup, useMap, useMapEvents } from 'react-leaflet';
+import { MapContainer, TileLayer, Marker, Popup, useMap, useMapEvents, Tooltip } from 'react-leaflet';
 import _MarkerClusterGroup from 'react-leaflet-cluster';
 const MarkerClusterGroup = (_MarkerClusterGroup as any).default || _MarkerClusterGroup;
 import L from 'leaflet';
@@ -165,28 +165,39 @@ export const ExploreMap = ({ onBack, onLogout, user, onViewTour }: { onBack: ()
               : userPos;
 
             return (
-                  <Marker
-                    key={tour.id}
-                    position={markerPos}
-                    eventHandlers={{
-                      click: () => onViewTour(tour.id)
-                    }}
-                    icon={L.divIcon({
-                      className: 'custom-bubble',
-                      html: `
-                        <div class="relative group">
-                          <div class="w-12 h-12 rounded-full border-4 border-white shadow-lg overflow-hidden transition-transform group-hover:scale-110">
-                            <img src="${tourImage}" class="w-full h-full object-cover" onerror="this.src='https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?w=100'"/>
-                          </div>
-                          <div class="absolute -bottom-1 -right-1 bg-blue-600 rounded-full w-5 h-5 border-2 border-white flex items-center justify-center text-[10px] font-black text-white">
-                            S
-                          </div>
+                <Marker
+                  key={tour.id}
+                  position={markerPos}
+                  eventHandlers={{
+                    click: () => onViewTour(tour.id)
+                  }}
+                  icon={L.divIcon({
+                    className: 'custom-bubble',
+                    html: `
+                      <div class="relative group">
+                        <div class="w-12 h-12 rounded-full border-4 border-white shadow-lg overflow-hidden transition-transform group-hover:scale-110">
+                          <img src="${tourImage}" class="w-full h-full object-cover" onerror="this.src='https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?w=100'"/>
                         </div>
-                      `,
-                      iconSize: [48, 48],
-                      iconAnchor: [24, 24]
-                    })}
-                  />
+                        <div class="absolute -bottom-1 -right-1 bg-blue-600 rounded-full w-5 h-5 border-2 border-white flex items-center justify-center text-[10px] font-black text-white">
+                          S
+                        </div>
+                      </div>
+                    `,
+                    iconSize: [48, 48],
+                    iconAnchor: [24, 24]
+                  })}
+                >
+                  <Tooltip direction="top" offset={[0, -20]} opacity={1}>
+                    <div className="p-1 max-w-[180px]">
+                      <div className="font-black text-blue-600 text-[11px] mb-0.5 uppercase tracking-tight truncate">{tour.title}</div>
+                      {tour.description && (
+                        <div className="text-[10px] text-gray-500 line-clamp-2 leading-tight italic">
+                          {tour.description}
+                        </div>
+                      )}
+                    </div>
+                  </Tooltip>
+                </Marker>
             );
           })}
         </MarkerClusterGroup>