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.