Merge pull request #841 from gabrieljablonski/add-position-strategy-prop

Add `positionStrategy` prop

Author: danielbarion

docs/docs/options.mdx

@@ -16,6 +16,7 @@ const Tooltip = ({
   place = 'top',
   offset = 10,
   events = ['hover'],
+  positionStrategy = 'absolute',
   wrapper: WrapperElement = 'div',
   children = null,
   delayShow = 0,
@@ -148,6 +149,7 @@ const Tooltip = ({
       elementReference,
       tooltipReference: tooltipRef.current as HTMLElement,
       tooltipArrowReference: tooltipArrowRef.current as HTMLElement,
+      strategy: positionStrategy,
     }).then((computedStylesData) => {
       if (Object.keys(computedStylesData.tooltipStyles).length) {
         setInlineStyles(computedStylesData.tooltipStyles)
@@ -170,6 +172,7 @@ const Tooltip = ({
       role="tooltip"
       className={classNames(styles['tooltip'], styles[variant], className, {
         [styles['show']]: isOpen || show,
+        [styles['fixed']]: positionStrategy === 'fixed',
       })}
       style={inlineStyles}
       ref={tooltipRef as React.RefObject<HTMLDivElement>}

src/components/Tooltip/Tooltip.tsx

@@ -10,6 +10,8 @@ export type ChildrenType = Element | ElementType | ReactNode
 
 export type EventsType = 'hover' | 'click'
 
+export type PositionStrategy = 'absolute' | 'fixed'
+
 export interface ITooltip {
   className?: string
   classNameArrow?: string
@@ -24,6 +26,7 @@ export interface ITooltip {
   wrapper?: WrapperType
   children?: ChildrenType
   events?: EventsType[]
+  positionStrategy?: PositionStrategy
   delayShow?: number
   delayHide?: number
   isOpen?: boolean

src/components/Tooltip/TooltipTypes.d.ts

@@ -13,6 +13,10 @@
   will-change: opacity, visibility;
 }
 
+.fixed {
+  position: fixed;
+}
+
 .arrow {
   position: absolute;
   background: var(--rt-color-dark);

src/components/Tooltip/styles.module.css

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react'
 import { Tooltip } from 'components/Tooltip'
 import type {
   EventsType,
+  PositionStrategy,
   PlacesType,
   VariantType,
   WrapperType,
@@ -22,6 +23,7 @@ const TooltipController = ({
   wrapper = 'div',
   children = null,
   events = ['hover'],
+  positionStrategy = 'absolute',
   delayShow = 0,
   delayHide = 0,
   getContent,
@@ -36,6 +38,8 @@ const TooltipController = ({
   const [tooltipDelayHide, setTooltipDelayHide] = useState(delayHide)
   const [tooltipWrapper, setTooltipWrapper] = useState<WrapperType>(wrapper)
   const [tooltipEvents, setTooltipEvents] = useState<EventsType[]>(events)
+  const [tooltipPositionStrategy, setTooltipPositionStrategy] =
+    useState<PositionStrategy>(positionStrategy)
   const [isHtmlContent, setIsHtmlContent] = useState<boolean>(Boolean(html))
 
   const getDataAttributesFromAnchorElement = (elementReference: HTMLElement) => {
@@ -89,6 +93,9 @@ const TooltipController = ({
         const parsedEvents = value.split(' ')
         setTooltipEvents(parsedEvents as EventsType[])
       },
+      positionStrategy: (value: PositionStrategy) => {
+        setTooltipPositionStrategy(value)
+      },
       'delay-show': (value: number) => {
         setTooltipDelayShow(Number(value))
       },
@@ -181,6 +188,7 @@ const TooltipController = ({
     offset: tooltipOffset,
     wrapper: tooltipWrapper,
     events: tooltipEvents,
+    positionStrategy: tooltipPositionStrategy,
     delayShow: tooltipDelayShow,
     delayHide: tooltipDelayHide,
     isOpen,

src/components/TooltipController/TooltipController.tsx

@@ -4,6 +4,7 @@ import type {
   WrapperType,
   ChildrenType,
   EventsType,
+  PositionStrategy,
 } from 'components/Tooltip/TooltipTypes'
 
 export interface ITooltipController {
@@ -19,6 +20,7 @@ export interface ITooltipController {
   wrapper?: WrapperType
   children?: ChildrenType
   events?: EventsType[]
+  positionStrategy?: PositionStrategy
   delayShow?: number
   delayHide?: number
   getContent?: function

src/components/TooltipController/TooltipControllerTypes.d.ts

@@ -4,4 +4,5 @@ export interface IComputePositions {
   tooltipArrowReference?: Element | HTMLElement | null
   place?: 'top' | 'right' | 'bottom' | 'left'
   offset?: number
+  strategy?: 'absolute' | 'fixed'
 }

src/utils/compute-positions-types.d.ts

@@ -7,6 +7,7 @@ export const computeToolTipPosition = async ({
   tooltipArrowReference = null,
   place = 'top',
   offset: offsetValue = 10,
+  strategy = 'absolute',
 }: IComputePositions) => {
   if (!elementReference) {
     // elementReference can be null or undefined and we will not compute the position
@@ -23,9 +24,9 @@ export const computeToolTipPosition = async ({
 
   if (tooltipArrowReference) {
     middleware.push(arrow({ element: tooltipArrowReference as HTMLElement }))
-
     return computePosition(elementReference as HTMLElement, tooltipReference as HTMLElement, {
       placement: place,
+      strategy,
       middleware,
     }).then(({ x, y, placement, middlewareData }) => {
       const styles = { left: `${x}px`, top: `${y}px` }
@@ -55,6 +56,7 @@ export const computeToolTipPosition = async ({
 
   return computePosition(elementReference as HTMLElement, tooltipReference as HTMLElement, {
     placement: 'bottom',
+    strategy,
     middleware,
   }).then(({ x, y }) => {
     const styles = { left: `${x}px`, top: `${y}px` }