Tooltip arrow positioned on corner when using -start or -end, or offset

[lilyMrt]

Using attachTo with the on: property set to a position with -start or -end places the arrow at the edge of the shepherd-element

attachTo: { element: "#article1", on: "left-end" }

results in the tooltip being positioned on the corner of the floating element:

The same behavior is observed when using the position "left" and using offset() within floatingUIOptions to adjust the position.

floatingUIOptions: {  middleware: [offset({ crossAxis: -300 })]

The arrow() function does not seem to have any effect.

Is this expected? Is there another way to position the tooltip ?

[lilyMrt]

I've been playing around with the source code/Demo page, can confirm that the same behavior occurs on your own demo site if you apply a large offset (ex: crossAxis: 500) on the first tour step.

The options returned from the merge call in getFloatingUIOptions is an array containing [arrow(element), arrow(null, padding)], where the second arrow function passed from the steps has the padding but the element is null, and the first has just fetched the correct element but has no padding, so nothing gets applied. If we initialize the arrow function in getFloatingUIOptions with a hardcoded padding, it is applied as expected, but the one with the null element isn't.

I'm not sure if perhaps the merge function is presumed to/should combine all the middleware functions with the same name, floatingUI does accept duplicate options and applies all of them, but I suppose it doesn't work because the arrow element does not exist at the time the step is defined so it just returns null.

At the very least, I think a padding of 5 or 10 could be applied to the default arrow element, if anyone has any workarounds or suggestions I'd be glad to hear them.