Tutorial Leaflet Beginner – Leaflet Popup and Tooptip

Popup

Used to open popups in certain places of the map. Use Map.openPopup to open popups while making sure that only one popup is open at one time (recommended for usability), or use Map.addLayer to open as many as you want.

Usage example

If you want to just bind a popup to marker click and then open it, it’s really easy:

marker.bindPopup(popupContent).openPopup();

Path overlays like polylines also have a bindPopup method. Here’s a more complicated way to open a popup on a map:

var popup = L.popup()
    .setLatLng(latlng)
    .setContent('<p>Hello world!<br />This is a nice popup.</p>')
    .openOn(map);

Used to display small texts on top of map layers.

Usage example

marker.bindTooltip("my tooltip text").openTooltip();

Tooltip

Used to display small texts on top of map layers.

Usage example

marker.bindTooltip("my tooltip text").openTooltip();

Note about tooltip offset. Leaflet takes two options in consideration for computing tooltip offsetting:

• the offset Tooltip option: it defaults to [0, 0], and it’s specific to one tooltip. Add a positive x offset to move the tooltip to the right, and a positive y offset to move it to the bottom. Negatives will move to the left and top.
• the tooltipAnchor Icon option: this will only be considered for Marker. You should adapt this value if you use a custom icon.

Keyword Related:

openstreetmap
osm map
openstreetview
osm api
openstreet view