Apply user-requested tooltip position

example/html-tooltip/index.html

@@ -79,22 +79,23 @@ <h4>Section Six</h4>
               {
                 title: '<p>Welcome</p>',
                 element: '#step1',
-                intro: "This is a <b>bold</b> tooltip."
+                intro: "This is a <b>bold</b> tooltip.",
+                position: 'right'
               },
               {
                 element: '#step2',
                 intro: "Ok, <i>wasn't</i> that fun?",
-                position: 'right'
+                position: 'bottom-right-aligned'
               },
               {
                 element: '#step3',
                 intro: 'More features, more <span style="color: red;">f</span><span style="color: green;">u</span><span style="color: blue;">n</span>.',
-                position: 'left'
+                position: 'top-middle-aligned'
               },
               {
                 element: '#step4',
                 intro: "<span style='font-family: Tahoma'>Another step with new font!</span>",
-                position: 'bottom'
+                position: 'bottom-middle-aligned'
               },
               {
                 element: '#step5',

src/packages/tooltip/tooltipPosition.ts

@@ -104,22 +104,25 @@ export function determineAutoPosition(
     removeEntry<TooltipPosition>(possiblePositions, "left");
   }
 
-  // strip alignment from position
+  // Check if user requested a specific alignment
+  const userRequestedAlignment =
+    desiredTooltipPosition && desiredTooltipPosition.includes("-aligned");
+
+  // strip alignment from position for base position checking
+  let basePosition = desiredTooltipPosition;
   if (desiredTooltipPosition) {
     // ex: "bottom-right-aligned"
     // should return 'bottom'
-    desiredTooltipPosition = desiredTooltipPosition.split(
-      "-"
-    )[0] as TooltipPosition;
+    basePosition = desiredTooltipPosition.split("-")[0] as TooltipPosition;
   }
 
   if (possiblePositions.length) {
     // Pick the first valid position, in order
     calculatedPosition = possiblePositions[0];
 
-    if (possiblePositions.includes(desiredTooltipPosition)) {
+    if (possiblePositions.includes(basePosition)) {
       // If the requested position is in the list, choose that
-      calculatedPosition = desiredTooltipPosition;
+      calculatedPosition = basePosition;
     }
   }
 
@@ -149,13 +152,22 @@ export function determineAutoPosition(
       ];
     }
 
-    calculatedPosition =
-      determineAutoAlignment(
-        targetOffset.absoluteLeft,
-        tooltipWidth,
-        windowSize.width,
-        desiredAlignment
-      ) || defaultAlignment;
+    // If user requested a specific alignment, use it directly
+    if (
+      userRequestedAlignment &&
+      desiredAlignment.includes(desiredTooltipPosition)
+    ) {
+      calculatedPosition = desiredTooltipPosition;
+    } else {
+      // No specific alignment requested, use auto-alignment
+      calculatedPosition =
+        determineAutoAlignment(
+          targetOffset.absoluteLeft,
+          tooltipWidth,
+          windowSize.width,
+          desiredAlignment
+        ) || defaultAlignment;
+    }
   }
 
   return calculatedPosition;