Home > widget-integration > FilterController > adjustTooltipPosition

FilterController.adjustTooltipPosition property

Adjusts tooltip position to ensure it's visible within the viewport. Calculates and applies proper positioning for tooltip elements.

This method: - Positions tooltip relative to its trigger element - Handles edge cases when tooltip would overflow viewport - Supports tooltips within slick carousel slides - Applies responsive positioning based on available space

Signature:

protected adjustTooltipPosition: (tooltipContent: any, rootElement: any) => void;

Remarks

Uses fixed positioning for consistent placement and handles special cases like carousels where the parent slide may have transforms applied. Adjusts alignment (left/right/center) based on viewport boundaries.

Example

Override to customize tooltip positioning:

window.boostWidgetIntegration.extend('FilterController', (FilterController) => {
  return class CustomFilterController extends FilterController {
    adjustTooltipPosition(tooltipContent, rootElement) {
      super.adjustTooltipPosition(tooltipContent, rootElement);

      // Add arrow pointer to tooltip
      const arrow = tooltipContent.querySelector('.tooltip-arrow');
      if (arrow) {
        const rootRect = rootElement.getBoundingClientRect();
        arrow.style.left = `${rootRect.width / 2}px`;
      }
    }
  };
});