fix all positions

Author: Parvinmh

example/hello-world/withScroll.html

@@ -51,7 +51,7 @@ <h1 data-step="3" data-intro="This is a tooltip!">Works with a Scrollable Elemen
       <hr>
 
       <div class="row-fluid marketing">
-          <h4 data-step="2" data-intro="Another step.">Section One</h4>
+          <h4 data-step="2" data-intro="Another step." data-position="left-middle-aligned">Section One</h4>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
 
           <h4>Section Two</h4>
@@ -69,7 +69,7 @@ <h4>Section Four</h4>
           <h4>Section Five</h4>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
 
-          <h4 data-step="1" data-intro="A scrolling step.">Section Six</h4>
+          <h4 data-step="1" data-intro="A scrolling step." data-position="right-middle-aligned">Section Six</h4>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
 
           <h4>Section Seven</h4>

example/html-tooltip/index.html

@@ -94,11 +94,12 @@ <h4>Section Six</h4>
               {
                 element: '#step4',
                 intro: "<span style='font-family: Tahoma'>Another step with new font!</span>",
-                position: 'bottom'
+                position: 'bottom-middle-aligned'
               },
               {
                 element: '#step5',
-                intro: '<strong>Get</strong> it, <strong>use</strong> it.'
+                intro: '<strong>Get</strong> it, <strong>use</strong> it.',
+                position: 'top-middle-aligned'
               }
             ]
           });

src/packages/hint/option.ts

@@ -1,4 +1,4 @@
-import { TooltipPosition } from "../../packages/tooltip";
+import { TooltipBasePosition } from "../../packages/tooltip";
 import { HintItem, HintPosition } from "./hintItem";
 import { Translator, LanguageCode } from "../../i18n/language";
 
@@ -28,7 +28,7 @@ export interface HintOptions {
   /* To determine the tooltip position automatically based on the window.width/height */
   autoPosition: boolean;
   /* Precedence of positions, when auto is enabled */
-  positionPrecedence: TooltipPosition[];
+  positionPrecedence: TooltipBasePosition[];
   /* Optional property to determine if content should be rendered as HTML */
   tooltipRenderAsHtml?: boolean;
   /* Optional property to set the language of the hint.

src/packages/tooltip/index.ts

@@ -1 +1 @@
-export { TooltipPosition } from "./tooltipPosition";
+export { TooltipPosition, TooltipBasePosition } from "./tooltipPosition";

src/packages/tooltip/tooltip.ts

@@ -2,7 +2,11 @@ import getOffset, { Offset } from "../../util/getOffset";
 import getWindowSize from "../../util/getWindowSize";
 import dom, { ChildDom, State } from "../dom";
 import { arrowClassName, tooltipClassName } from "../tour/classNames";
-import { determineAutoPosition, TooltipPosition } from "./tooltipPosition";
+import {
+  determineAutoPosition,
+  TooltipPosition,
+  TooltipBasePosition,
+} from "./tooltipPosition";
 
 const { div } = dom.tags;
 
@@ -313,7 +317,7 @@ export type TooltipProps = {
 
   // auto-alignment properties
   autoPosition: boolean;
-  positionPrecedence: TooltipPosition[];
+  positionPrecedence: TooltipBasePosition[];
 
   onClick?: (e: any) => void;
   className?: string;

src/packages/tooltip/tooltipPosition.test.ts

@@ -1,91 +1,89 @@
-import { determineAutoPosition, TooltipPosition } from "./tooltipPosition";
+import { determineAutoPosition } from "../tooltip/tooltipPosition";
+import type { Offset } from "../../util/getOffset";
 
-const positionPrecedence: TooltipPosition[] = [
-  "bottom",
-  "top",
-  "right",
-  "left",
-];
+const mockViewport = { width: 1000, height: 800 };
 
-describe("placeTooltip", () => {
-  test("should automatically place the tooltip position when there is enough space", () => {
-    // Arrange
-    // Act
-    const position = determineAutoPosition(
-      positionPrecedence,
-      {
-        top: 200,
-        left: 200,
-        height: 100,
-        width: 100,
-        right: 300,
-        bottom: 300,
-        absoluteTop: 200,
-        absoluteLeft: 200,
-        absoluteRight: 300,
-        absoluteBottom: 300,
-      },
-      100,
+const makeOffset = (
+  left: number,
+  top: number,
+  width = 100,
+  height = 50
+): Offset => ({
+  top,
+  left,
+  width,
+  height,
+  bottom: top + height,
+  right: left + width,
+  absoluteTop: top,
+  absoluteLeft: left,
+  absoluteBottom: top + height,
+  absoluteRight: left + width,
+});
+
+describe("determineAutoPosition", () => {
+  it("should return 'bottom-left-aligned' when there is enough space below", () => {
+    const target = makeOffset(400, 200);
+    const pos = determineAutoPosition(
+      ["bottom", "top"],
+      target,
+      200,
       100,
-      "top",
-      { height: 1000, width: 1000 }
+      "bottom",
+      mockViewport
     );
-
-    // Assert
-    expect(position).toBe("top-right-aligned");
+    expect(pos).toBe("bottom-left-aligned");
   });
 
-  test("should use floating tooltips when height/width is limited", () => {
-    // Arrange
-    // Act
-    const position = determineAutoPosition(
-      positionPrecedence,
-      {
-        top: 0,
-        left: 0,
-        height: 100,
-        width: 100,
-        right: 0,
-        bottom: 0,
-        absoluteTop: 0,
-        absoluteLeft: 0,
-        absoluteRight: 0,
-        absoluteBottom: 0,
-      },
-      100,
+  it("should return 'top-left-aligned' when there is no space below", () => {
+    const target = makeOffset(400, 750);
+    const pos = determineAutoPosition(
+      ["bottom", "top"],
+      target,
+      200,
       100,
-      "top",
-      { height: 100, width: 100 }
+      "bottom",
+      mockViewport
     );
-
-    // Assert
-    expect(position).toBe("floating");
+    expect(pos).toBe("top-left-aligned");
   });
 
-  test("should use bottom middle aligned when there is enough vertical space", () => {
-    // Arrange
-    // Act
-    const position = determineAutoPosition(
-      positionPrecedence,
-      {
-        top: 0,
-        left: 0,
-        height: 100,
-        width: 100,
-        right: 0,
-        bottom: 0,
-        absoluteTop: 0,
-        absoluteLeft: 0,
-        absoluteRight: 0,
-        absoluteBottom: 0,
-      },
+  it("should switch to 'left' when right side has no space", () => {
+    const target = makeOffset(950, 400);
+    const pos = determineAutoPosition(
+      ["right", "left", "top", "bottom"],
+      target,
       100,
+      50,
+      "right",
+      mockViewport
+    );
+    expect(pos).toBe("left");
+  });
+
+  it("should fall back to 'floating' when no space anywhere", () => {
+    const target = makeOffset(0, 0, 1200, 900);
+    const pos = determineAutoPosition(
+      ["top", "bottom", "left", "right"],
+      target,
+      200,
       100,
-      "left",
-      { height: 500, width: 100 }
+      "bottom",
+      mockViewport
     );
+    expect(pos).toBe("floating");
+  });
 
-    // Assert
-    expect(position).toBe("bottom-middle-aligned");
+  it("should respect desired alignment if possible", () => {
+    const target = makeOffset(400, 200);
+    const pos = determineAutoPosition(
+      ["bottom", "top"],
+      target,
+      200,
+      100,
+      "bottom-right-aligned",
+      mockViewport
+    );
+    expect(pos).toBe("bottom-right-aligned");
   });
 });