How to make a reaction pop-up flyer pointer to a marker?

Question

How can I make the arrow in the popup window on the React-Leaftlet popup point a marker instead of the lower right window, as shown in the image below?

Here is my code for the popup:

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

I am using the code Popup.jsfrom the sample repository folder react-leaflet. In this class, I do not see the option to set the offset.

Even just removing this down arrow can be good enough.

Thanks,

Answer 1

you can create a tooltip with leaflet-popup-tipthe css class. depending on your needs, you can change the position using css.

for example, hiding the tip

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