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

Question

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?

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,

Wiliness

Answer 1

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;
}

Quadrate