._.

src/components/DeliveryOrdersList.css

@@ -6,4 +6,11 @@
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     transform: scale(1.02);
     background-color: #f8f9fa;
+}
+
+.hover-info {
+    color: #007bff;
+    font-size: 0.9em;
+    margin-top: 10px;
+    transition: opacity 0.3s ease;
 }

src/components/DeliveryOrdersList.jsx

@@ -25,6 +25,7 @@ const DeliveryOrdersList = ({
   const [deliveryOrders, setDeliveryOrders] = useState([]);
   const [loadingDeliveryOrders, setLoadingDeliveryOrders] = useState(true);
   const [calculatingRoutes, setCalculatingRoutes] = useState([]);
+  const [hoveredOrderId, setHoveredOrderId] = useState(null);
   const navigate = useNavigate();
 
   useEffect(() => {
@@ -167,6 +168,8 @@ const DeliveryOrdersList = ({
               key={order.id}
               className="card mb-1"
               onClick={() => onSubOrderClick(order.id)}
+              onMouseEnter={() => setHoveredOrderId(order.id)} // Обработчик наведения
+              onMouseLeave={() => setHoveredOrderId(null)} // Обработчик покидания
             >
               <div className="card-body">
                 <p>Этап №{index + 1}</p>
@@ -180,6 +183,11 @@ const DeliveryOrdersList = ({
                     <span className="visually-hidden"></span>
                   </div>
                 )}
+                {hoveredOrderId === order.id && ( 
+                  <p className="hover-info">
+                    Нажмите, чтобы посмотреть подробную информацию
+                  </p>
+                )}
               </div>
             </div>
           ))}