Leaflet - UTFGrid - add popup - popup

Question

I know it's a beginner question and probably very easy but I can't get it to work. I have a map with 2 utfgrids which show an information about bicycle and hiking routes. It is based on this example:
http://bl.ocks.org/milkbread/6449317
It works fine but I would like to change it this way. When hoovering the existing infobox should show up but when clicking on the route the popup should show up in the place where I clicked (with the same information that shows up in the infobox).
I tried different ways to apply it but I always get an error. Here's a link to my working webiste and a part of the code responsible for the infobox window.
http://wojtas82.zrujnowane.pl/utf2.html#15/54.5027/18.4886/osm-rowerowe-piesze
And the code:
utfGrid2.on('mouseover', function(e){ info.update(e);}).on('mouseout', function(e){ info.update();})
utfGrid1.on('mouseover', function(e){ info.update(e);}).on('mouseout', function(e){ info.update();})
var info = L.control();
info.options.position = 'bottomleft';
info.onAdd = function (map) {
this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
this.update();
return this._div;
};
info.update = function (props) {
this._div.innerHTML = (props ?
'<img src="img/' + props.data.route +'_'+ props.data.osmc_color +'_'+ props.data.osmc_background +'_'+ props.data.osmc_foreground + '.png" ><br /> ' + "<b>" + props.data.name + "</b><br />" + 'Długość: ' + (props.data.distance ? props.data.distance : '') + ' km' + "<br />" + 'Opis szlaku: ' + (props.data.description ? props.data.description : '') : '');
};
I will be very greatful for help.
Thank you very much.

Answer 1

Have you tried using
L.popup for your popup? Something like
utfGrid1.on('click', function(e) {
if (e.data) {
L.popup()
.setLatLng(e.latlng)
.setContent(e ? '<img src="img/' + e.data.route + '_' + e.data.osmc_color + '_' + e.data.osmc_background + '_' + e.data.osmc_foreground + '.png" ><br /> ' + "<b>" + e.data.name + "</b><br />" + 'Długość: ' + (e.data.distance ? e.data.distance : '') + ' km' + "<br />" + 'Opis szlaku: ' + (e.data.description ? e.data.description : '')).openOn(map);
}
});