Tooltip placement

1,146 views
Skip to first unread message

John Muccigrosso

unread,
May 18, 2020, 8:27:25 AM5/18/20
to Leaflet

I'd like to set the vertical position of my tooltip, but have leaflet handle the horizontal, moving it left or right as needed, depending on where it is on the map. That way I could have the tooltip in, say, whichever top corner of the icon makes it visible. You can do this by putting it in the top middle of your icon, but not off to either side, as far as I can tell.

IOW, something like a "top-corner" position.

Leaflet does move the tip left or right, but it uses the offset point you set, what I'd like is to set only the absolute vertical coordinate of that point and the relative horizontal.

Part of what I want to do is have the tooltip a bit out of the way and off to the side of the icon.


Pat Keller

unread,
May 18, 2020, 10:51:37 PM5/18/20
to Leaflet
Did you try adjusting the tooltip anchor or offset. https://leafletjs.com/reference-1.6.0.html#tooltip

John Muccigrosso

unread,
May 19, 2020, 12:24:38 PM5/19/20
to Leaflet
On Tuesday, 19 May 2020 04:51:37 UTC+2, Pat Keller wrote:
Did you try adjusting the tooltip anchor or offset. https://leafletjs.com/reference-1.6.0.html#tooltip

Yes.

As I understand it, the offset needs an x and y coordinate. The direction then places the tool tip relative to that.

What I"m looking to do is have the tooltip always visible by being to the right or the left, as needed, but never blocking the icon. It seems like allowing me to selected the vertical position of the tooltip and the relative horizontal, that is, how far off center, would accomplish this. Leaflet would move the tooltip to the left or right as needed, using the vertical coordinate and the appropriate left or right version of the horizontal.

I don't think this is currently possible.

Pat Keller

unread,
May 19, 2020, 3:06:47 PM5/19/20
to Leaflet
I just found the openTooltip function when I was checking the docs again.

I made a quick fiddle for you: https://jsfiddle.net/pkeller3/ywcLbgf7/9/

John Muccigrosso

unread,
May 20, 2020, 4:09:11 AM5/20/20
to Leaflet
OK, but isn't that just placing a tooltip at a given point? I want to be able to use the icon anchor. 

Pat Keller

unread,
May 20, 2020, 4:27:06 PM5/20/20
to leafl...@googlegroups.com
I was thinking you could calculate where you want the tooltip to open and use the openTooltip function, but thats probably the worst case solution.

Are you using a custom icon? Did you try the tooltipAnchor property? Can you make an example fiddle, plunker, or a picture showing what you are trying to do?

--

---
You received this message because you are subscribed to a topic in the Google Groups "Leaflet" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/leaflet-js/3rsegLYIJH4/unsubscribe.
To unsubscribe from this group and all its topics, send an email to leaflet-js+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/leaflet-js/3a5ec212-9f83-4522-a556-4b0ae1aeb729%40googlegroups.com.


--
Patrick Keller
pkel...@gmail.com

John Muccigrosso

unread,
May 21, 2020, 10:37:27 AM5/21/20
to Leaflet
On Wednesday, 20 May 2020 22:27:06 UTC+2, Pat Keller wrote:
I was thinking you could calculate where you want the tooltip to open and use the openTooltip function, but thats probably the worst case solution.

Are you using a custom icon? Did you try the tooltipAnchor property? Can you make an example fiddle, plunker, or a picture showing what you are trying to do?

No, I'm not using tooltipanchor, I'm using offset. But either gets me the same result.

What I want is for the tooltip to work as in your fiddle: when the marker is on the left, the tip appears to the right, and vice versa. The difference from current Leaflet behavior is that I'd like the x coordinate to switch signs automatically, so that the anchor for the tooltip changes from, say, 30 pixels left of the anchor to 30 pixels right of it on its own. Direction already does half of this: it flips the box from left to right, but around the anchor point which doesn't move. See the attached pic.

I could probably just do the math myself by setting the tip offset to the left or right depending on which side of the map it's on, but I'm hoping that either this is already possible and I just don't realize it, or that I can make a feature request to have it included. I can imagine a property like "autoswitch" that automatically provides the appropriate sign to the coordinates.

PS It just occurs to me that there's no reason for this not to work for the y-coordinate too. That is, when a marker is at the top, the tip appears below it and when it's at the bottom, the tip appears above it.
Screenshot 2020-05-21 16.34.04.jpg

Pat Keller

unread,
May 26, 2020, 10:26:27 AM5/26/20
to Leaflet
The fiddle I made is showing the default behavior. If the default behavior isn't what you're looking for then I think you will need to manually calculate the position for the tooltip. There's no other option that I know of.
Reply all
Reply to author
Forward
0 new messages