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;