tooltipAnchor has limited or no effect for some Tooltip directions

[Istador]

• I've looked at the documentation to make sure the behavior is documented and expected

The coordinates of the point from which tooltips will "open", relative to the icon anchor.

• I'm sure this is a Leaflet code issue, not an issue with my own code nor with the framework I'm using (Cordova, Ionic, Angular, React…)
• I've searched through the issues to make sure it's not yet reported

Steps to reproduce
Steps to reproduce the behavior:

• Define an Icon with the tooltipAnchor option with a non-zero value for x.
• Create a Marker using that Icon, that has a Tooltip bound with an top, bottom or center direction.

Expected behavior
The anchor of the Tooltip should move relative to the iconAnchor according to the values defined in the tooltipAnchor. It should have the same behavior as popupAnchor according to the documentation, e.g. if given the same values it should position itself at the same position as the Popup.

Current behavior
tooltipAnchor.x has no effect for the directions top, bottom and center.
tooltipAnchor.y has no effect for the bottom direction.

Environment

• Leaflet version: 1.5.1
• Browser (with version): Chrome 76.0.3809.100, Waterfox 56.2.12
• OS/Platform (with version): Windows 7 (6.1 Build 7601), Ubuntu 18.04

Additional context
Source code responsible for the issue:

Leaflet/src/layer/Tooltip.js

Lines 144 to 156 in 1e0d43b

	if (direction === 'top') {
	pos = pos.add(toPoint(-tooltipWidth / 2 + offset.x, -tooltipHeight + offset.y + anchor.y, true));
	} else if (direction === 'bottom') {
	pos = pos.subtract(toPoint(tooltipWidth / 2 - offset.x, -offset.y, true));
	} else if (direction === 'center') {
	pos = pos.subtract(toPoint(tooltipWidth / 2 + offset.x, tooltipHeight / 2 - anchor.y + offset.y, true));
	} else if (direction === 'right' || direction === 'auto' && tooltipPoint.x < centerPoint.x) {
	direction = 'right';
	pos = pos.add(toPoint(offset.x + anchor.x, anchor.y - tooltipHeight / 2 + offset.y, true));
	} else {
	direction = 'left';
	pos = pos.subtract(toPoint(tooltipWidth + anchor.x - offset.x, tooltipHeight / 2 - anchor.y - offset.y, true));
	}

Minimal example reproducing the issue
https://jsfiddle.net/590jt8fx/

const map = L.map('map').setView([0.0, 0.0], 12)

const icon = L.icon({
  iconUrl: 'https://leafletjs.com/docs/images/logo.png',
  iconSize: [120, 31.8], // (600 x 159)/5
  iconAnchor: [60, 15.9], // center
  popupAnchor: [50, -15.9], // top right
  tooltipAnchor: [50, -15.9], // top right
})

L.marker([0, 0], { icon } )
  .bindPopup("popup is working correctly")
  .bindTooltip("tooltipAnchor.x has no effect", { direction: 'top' })
  .addTo(map)
  
L.marker([-0.02, 0], { icon } )
  .bindTooltip("offset is needed", { direction: 'top', offset: [50, 0] })
  .addTo(map)

• this example is as simple as possible
• this example does not rely on any third party code

[vangenechtenbert]

same here

[johnd0e]

@Istador
@vangenechtenbert

Is it fixable by #6116?

[Istador]

@Istador
@vangenechtenbert

Is it fixable by #6116?

No, it's even more broken than before.

That's likely because that pull request uses anchor.x for the y axis for the top and bottom direction, instead of for the x axis...

---

For comparison, this is the current behavior of my minimal example back then when I created the issue. The most recent master branch version shows the same behavior.

Hovering the first image:

Hovering the second image:

---

And this is the behavior of the latest commit 20784d7 from pull request #6116 with my minimal example code.

Hovering the first image:

Hovering the second image:

[johnd0e]

Can you provide own PR to fix this issue?

[johnd0e]

@Istador
Isn't this issue already fixed by #7155?

[Istador]

Yes, you're correct. I wrongly assumed my commit 5b30f7d would auto close this issue when being merged (I wrote too much in the first sentence of the commit message).