BUG: Misalignment of Popover Arrow with side: "bottom" and align: "start"

[asadahmad27]

Issue: Misalignment of Popover Arrow with side: "bottom" and align: "start"

Description:

I'm implementing Driver.js in my project, and overall, the implementation has been simple and straightforward. However, I encountered an issue when I tried to adjust the arrow positions for the popovers.

According to the documentation, setting side: "bottom" and align: "start" should position the popover below the selected element, with the arrow pointing towards the start (left). However, what actually happens is that the popover appears in the correct position, but the arrow is displayed at the end (right) instead of the start.

Steps to Reproduce:

1. Use Driver.js to add a popover with the following configuration:

   {
     element: "#menu",
     popover: {
       title: "Menu",
       description: "Here's the menu",
       side: "bottom",
       align: "start"
     }
   }

2. Run the tour in a scenario where there's enough space below the element.
3. Observe that the popover displays at the bottom, but the arrow appears on the right side instead of the left.

Expected Behavior:
The arrow should appear on the left (start) side when align: "start" is specified.

Actual Behavior:
The arrow appears on the right (end) side, even when align: "start" is used.

Environment:

• Driver.js version: 1.3.1
• Browser: Chrome
• OS: Ubuntu

Let me know if you need any additional information to help investigate this issue.

[joaolourencoge]

This is happening, is not respecting the side/align properties sent in the popover options

[rotkohlsuppe]

If have the exact same problem. I've made sure that align: center is set but the given class on the popup is driver-popover-arrow-align-end, eventhough there's enough space around. Only happens to some elements.

quickfix:
While defining the steps:

onHighlighted = () => {
   const popover = document.querySelector(
      ".driver-popover-arrow-align-end",
   );
   popover?.classList.remove("driver-popover-arrow-align-end");
   popover?.classList.add("driver-popover-arrow-align-center");
};

Can I disable collision calculation? It seems to be the problem.

[swithek]

This problem still exists, even when align: center is used.

[dsgh]

The problem seems to be here: src/popover.ts#L550

[kamranahmedse]

This has been patched in 1.3.2.

This happens when driver is unable to accurately align popover arrow with the active element from one of the fixed CSS positions (left, right, center) we have in the CSS. The temporary solution is to hide the arrow and reposition the popover closer to the element to compensate for the space initially intended for the arrow, if we are unable to directly point towards the element.

However, I am thinking of integrating floating-ui as it will simplify the positioning logic as well as handle these edge-cases. I will have to check the impact of that on the bundle size and decide accordingly.