apphouse/dist/components/tooltip/calculateTooltipPosition.ts

Component library for React that uses observable state management and theme-able components.

export interface TooltipPosition {
  top: number;
  left: number;
}

export interface TooltipDimensions {
  width: number;
  height: number;
}

/**
 * 
 * Function to calculate best position for tooltip
 * Usage Example
const tooltipContentWidth = 200;
const tooltipContentHeight = 100;

// Mocking tooltip width and height
const tooltipDimensions: TooltipDimensions = {
  width: tooltipContentWidth + 20, // Add extra space for padding or border
  height: tooltipContentHeight + 20
};

const tooltipPosition: TooltipPosition = calculateTooltipPosition(
  tooltipDimensions.width,
  tooltipDimensions.height,
  tooltipContentWidth,
  tooltipContentHeight
);

console.log('Tooltip position:', tooltipPosition);

 * @param tooltipWidth 
 * @param tooltipHeight 
 * @param tooltipContentWidth 
 * @param tooltipContentHeight 
 * @returns TooltipPosition
 */
export function calculateTooltipPosition(
  tooltipWidth: number,
  tooltipHeight: number,
  tooltipContentWidth: number,
  tooltipContentHeight: number
): TooltipPosition {
  const spaceThreshold = 10; // Define threshold space to leave around the tooltip

  const screenWidth =
    window.innerWidth ||
    document.documentElement.clientWidth ||
    document.body.clientWidth;
  const screenHeight =
    window.innerHeight ||
    document.documentElement.clientHeight ||
    document.body.clientHeight;

  const availableSpace = {
    top: spaceThreshold,
    left: spaceThreshold,
    right: screenWidth - tooltipContentWidth - spaceThreshold,
    bottom: screenHeight - tooltipContentHeight - spaceThreshold
  };

  const position: TooltipPosition = {
    top: 0,
    left: 0
  };
  console.log({ availableSpace, position, screenWidth, screenHeight });

  // Check if tooltip fits within the available space on each side
  if (tooltipWidth <= availableSpace.left) {
    position.left = spaceThreshold;
  } else if (tooltipWidth <= availableSpace.right) {
    position.left = screenWidth - tooltipWidth - spaceThreshold;
  } else {
    position.left = (screenWidth - tooltipWidth) / 2; // Center the tooltip horizontally
  }

  if (tooltipHeight <= availableSpace.top) {
    position.top = spaceThreshold;
  } else if (tooltipHeight <= availableSpace.bottom) {
    position.top = screenHeight - tooltipHeight - spaceThreshold;
  } else {
    position.top = (screenHeight - tooltipHeight) / 2; // Center the tooltip vertically
  }

  return position;
}