CODEWITHSUNDEEP
react-leaflet
Shafique Jamal
Shafique Jamal

Reputation: 1688

How to make pointer of react-leaflet popup point to the marker?

How can I make the arrow on the pop-up box on a React-Leaftlet Popup point to the marker, instead of the bottom right of the box, as in the figure below?

enter image description here

Here is my code for the popup:

<Popup>
  <span>
    <p>Foo</p>
  </span>
</Popup>

I am using the Popup.js code from the react-leaflet repository examples folder. In that class, I don't see an option for setting an offset.

Even just removing that downward pointing arrow might be good enough.

Thanks,

Upvotes: 6

Views: 1215

Answers (1)

Alex Parij
Alex Parij

Reputation: 1286

you can style the tip with leaflet-popup-tip css class. depending on your needs you can modify the position using css.

for example hiding the tip 

.leaflet-popup-tip {
    display:none;
}

Upvotes: 1

Related Questions