How to display the leaflet popup on the right/left side of mouse pointer?

Question

I want to display the leaflet pop up on the right or left side of the mouse pointer. By default it is displayed on the top of the mouse pointer.

how can I do that?

The demo is available here: http://jsfiddle.net/Wn5Kh

<!DOCTYPE html>
<html>
    <head>
        <title>CircleMarker tooltip</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="http://leafletjs.com/dist/leaflet.css" />
        <!--[if lte IE 8]>
            <link rel="stylesheet" href="http://leafletjs.com/dist/leaflet.ie.css"
            />
        <![endif]-->
    </head>

    <body>
        <div id="map" style="width: 600px; height: 400px"></div>
        <script src="http://leafletjs.com/dist/leaflet.js"></script>
    </body>
</html>

I'm confused. When I click on the map, the pop-up appears at the tip of my mouse. You don't want this..? — Sam P, May 28 '14 at 04:31
No, I want the pop up to appear either to the left or right side of mouse. — jones, May 28 '14 at 04:35
You should not do this. I would want to throw my phone/laptop/self against a wall if my clicks weren't accurate. — Sam P, May 28 '14 at 04:38

score 1 · Accepted Answer · answered May 28 '14 at 10:10

1

In leaflet.css you can change:

.leaflet-popup {
position: absolute;
text-align: center;
}

Try to play around with the position and you will see that you can change where the popup will be opened.

answered May 28 '14 at 10:10

Marko Letic

2,460
2
28
34

How to display the leaflet popup on the right/left side of mouse pointer?

1 Answers1