Thêm tính năng hiển thị tooltip trên bong bóng Tour
This commit is contained in:
@@ -1,5 +1,5 @@
|
|||||||
import React, { useEffect, useState } from 'react';
|
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';
|
import _MarkerClusterGroup from 'react-leaflet-cluster';
|
||||||
const MarkerClusterGroup = (_MarkerClusterGroup as any).default || _MarkerClusterGroup;
|
const MarkerClusterGroup = (_MarkerClusterGroup as any).default || _MarkerClusterGroup;
|
||||||
import L from 'leaflet';
|
import L from 'leaflet';
|
||||||
@@ -186,7 +186,18 @@ export const ExploreMap = ({ onBack, onLogout, user, onViewTour }: { onBack: ()
|
|||||||
iconSize: [48, 48],
|
iconSize: [48, 48],
|
||||||
iconAnchor: [24, 24]
|
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>
|
</MarkerClusterGroup>
|
||||||
|
|||||||
Reference in New Issue
Block a user