React Leaflet: Show popup on mouseover

Question

Has anyone been able to use the React Leaflet Popup element to show a popup on mouseover rather than on click?

I can't seem to find a way to achieve this.

Answer 1

I've recently solved this problem using React Refs and the Leaflet API.

A barebones example:

import React, { Component } from 'react';

import { Circle } from 'react-leaflet';

class Foo extends Component {
    render() {
        const { center, radius } = this.props;
        return (
            <Circle
              ref={circle => { this.circle = circle; }}
              center={center}
              radius={radius}
              onMouseOver={() => {
                  this.circle.leafletElement.bindPopup('foo').openPopup();
              }}/>
        );
    }
}

export default Foo;