diff --git a/example/html-tooltip/index.html b/example/html-tooltip/index.html
index cccc146c8..ad4dbe3d0 100644
--- a/example/html-tooltip/index.html
+++ b/example/html-tooltip/index.html
@@ -79,22 +79,23 @@
Section Six
{
title: 'Welcome
',
element: '#step1',
- intro: "This is a bold tooltip."
+ intro: "This is a bold tooltip.",
+ position: 'right'
},
{
element: '#step2',
intro: "Ok, wasn't that fun?",
- position: 'right'
+ position: 'bottom-right-aligned'
},
{
element: '#step3',
intro: 'More features, more fun.',
- position: 'left'
+ position: 'top-middle-aligned'
},
{
element: '#step4',
intro: "Another step with new font!",
- position: 'bottom'
+ position: 'bottom-middle-aligned'
},
{
element: '#step5',
diff --git a/src/packages/tooltip/tooltipPosition.ts b/src/packages/tooltip/tooltipPosition.ts
index 529becf7f..d27bbe8d0 100644
--- a/src/packages/tooltip/tooltipPosition.ts
+++ b/src/packages/tooltip/tooltipPosition.ts
@@ -104,22 +104,25 @@ export function determineAutoPosition(
removeEntry(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;