intro.js icon indicating copy to clipboard operation
intro.js copied to clipboard

Prosition prop is not working correctly

Open Gdiazdiaz opened this issue 8 months ago • 3 comments

When specifying position: 'bottom-align-middle' for a step, the tooltip often ignores the setting and appears on the left side of the element (or elsewhere), instead of centered below as expected.

Steps to Reproduce:

  • Create a step like: { element: '#my-element', intro: 'This is a test tooltip.', position: 'bottom-align-middle' }
  • Run introJs().start();
  • Observe the tooltip placement.

Expected Behavior:

The tooltip should appear directly beneath the target element, centered horizontally (middle aligned).

Actual Behavior:

The tooltip is often placed on the left, or some other unrelated position. This happens even when there's sufficient space below the element for proper placement.

Notes:

  • Tried with latest Intro.js version.
  • Happens regardless of scrollToElement or scrollTo: 'tooltip' settings.
  • Other positions (like 'bottom' or 'top') behave as expected.

Gdiazdiaz avatar Apr 16 '25 22:04 Gdiazdiaz

Please try the latest beta version If the issue still persists after updating, feel free to let us know.

Parvinmh avatar Jun 04 '25 08:06 Parvinmh

the positions bottom-right-aligned and bottom-middle-aligned are not working for me.

shelbydremely avatar Jul 03 '25 13:07 shelbydremely

Same problem here, still aligned slightly to the left on the current version (v8.3.1)

mfrey43 avatar Jul 08 '25 18:07 mfrey43