hover of marker in leaflet

Question

I would like to ask if it is possible to hover not CLICKED the marker in the leaflet map

here is my code

leaflet.js

var map = L.map( 'map', {
  center: [20.0, 5.0],
  maxZoom: 16,
  minZoom: 2,
  zoom: 2
})

L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
   attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
   subdomains: ['a', 'b', 'c']
}).addTo( map )

var myURL = jQuery( 'script[src$="leaf-demo.js"]' ).attr( 'src' ).replace( 'leaf-demo.js', '' )

var myIcon = L.icon({
  iconUrl: myURL + 'images/pin24.png',
  iconRetinaUrl: myURL + 'images/pin48.png',
  iconSize: [29, 24],
  iconAnchor: [9, 21],
  popupAnchor: [0, -14]
})

here is where it shows the marker and the data in the leaflet map

var markers = [
["<b style='font-size:15pt;'> ROXAS CITY CHAPTER </b> <br> <i style='font-size:12pt;'> JUAN DELA CRUZ </i> <br>[email protected]", 11.58528,122.75111],
["<b style='font-size:15pt;'> MANILA CITY CHAPTER </b> <br> <i style='font-size:12pt;'> PEDRO DELA CRUZ </i> <br>[email protected]", 14.599512,120.984222],
["<b style='font-size:15pt;'> CANADA CHAPTER </b> <br> <i style='font-size:12pt;'> SIMON DELA CRUZ </i> <br>[email protected]", 53.631611 ,-113.323975]
];
for ( var i=0; i < markers.length; i++ ){
  marker = L.marker ([markers[i][1], markers[i][2]], {icon: myIcon})
  .bindPopup(markers[i][0])

  .addTo( map );
}

here is a image for more understanding

Answer 1

Add mouseover event on the marker and calling openPopup() in the handler like below:

marker = L.marker(...);

marker.on('mouseover',function(ev) {
  ev.target.openPopup();
});

or

marker.on('mouseover',function(ev) {
  marker.openPopup();
});

I have setup jsfiddle for the same : http://jsfiddle.net/74g6ts4r/

Answer 2

You could use title attribute on marker object

marker = L.marker ([markers[i][1], markers[i][2]], {icon: myIcon, title: "any text"})

Another approach could be firing openPopup with mouseover event:

    map.on('mouseover',function(ev) {
      ev.layer.openPopup()
    })

It was discussed on this thread