title: Add mouseover event to google maps direction service route
body: <p>How can I add a tooltip to a route I created using the google maps directions service </p>
  
  <p>You can see an example here:</p>
  
  <p><a href="https://i.stack.imgur.com/iM8L0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iM8L0.png" alt="enter image description here"></a></p>
  
  <p><a href="https://developers.google.com/maps/documentation/javascript/examples/directions-complex" rel="nofollow noreferrer">https://developers.google.com/maps/documentation/javascript/examples/directions-complex</a></p>
  
  <p>What I want is that when the user hovers over the route (<strong>the blue line</strong>), that a tooltip will be displayed with information on that route, is there a way i can bind an event that listens to "mouseover" over the direction?</p>
  
  <p>like</p>
  
  <pre><code>var directionsService = new google.maps.DirectionsService;
  var directionsDisplay = new google.maps.DirectionsRenderer({
    draggable: false,
    map: map,
    panel: document.getElementById('right-panel')
  });
  
  directionsDisplay.addListener('mouseover', function() {
    console.log("something")
  });
  </code></pre>