Leaflet routing machine , how to add popup or tooltips to route path?

Question

I'm trying to add a tooltip or a popup when a user clicks on the route or the alternative route created by L.Routing.control. I'm using Angular.

Example photo:

Answer 1

well after a whole weekend trying to figure out how to achieve this . finely get it to work (i don't know if its the best way to do it ). so here is the solution in case some one need it .

 route.on('routeselected', function (e) {
     var route = e.route;
     var blankMarker = L.icon({
       iconUrl: "../../assets/imgs/home/map-marker.png",
       iconSize: [0, 0],
       iconAnchor: [0, 0],
     });
     var distance = (e.route.summary.totalDistance / 1000).toFixed(2);
     var time = Math.round(e.route.summary.totalTime % 3600 / 60);
     var pop = `<div id="container">
    <div id="content">
     <div class="details-text">Distance : <b>`+ distance + ` Km</b></div>
     <div class="details-text">Temps estimé: <b>`+ time + ` Min</b></div>
  </div>`;
     console.log('route selected ', e.type)
     var marker = L.marker([route.coordinates[50].lat, route.coordinates[50].lng], { icon: blankMarker }).bindTooltip(pop, {
       permanent: true,
       direction: 'top'
     });
     if (e.type === 'routeselected') {
       //marker.remove()
       group.clearLayers();
       group.addLayer(marker)
     }
   });