feat: add positionFixed prop to Tooltip and Popover (#2039)

* feat: add positionFixed prop to Tooltip and Popover

* fix: added positionFixed to PopperContent PropTypes

Co-authored-by: Kyle Tsang <6854874+kyletsang@users.noreply.github.com>

docs/lib/Components/PopoversPage.js

@@ -79,6 +79,9 @@ export default class PopoversPage extends React.Component {
   ]),
   // Custom modifiers that are passed to Popper.js, see https://popper.js.org/popper-documentation.html#modifiers
   modifiers: PropTypes.object,
+  // Whether the element the tooltip is pointing to has "position: fixed" styling. This is passed to Popper.js and
+  // will make the tooltip itself have "position: fixed" as well
+  positionFixed: PropTypes.bool,
   offset: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.number

docs/lib/Components/TooltipsPage.js

@@ -84,6 +84,9 @@ export default class TooltipsPage extends React.Component {
   ]),
   // Custom modifiers that are passed to Popper.js, see https://popper.js.org/popper-documentation.html#modifiers
   modifiers: PropTypes.object,
+  // Whether the element the tooltip is pointing to has "position: fixed" styling. This is passed to Popper.js and
+  // will make the tooltip itself have "position: fixed" as well
+  positionFixed: PropTypes.bool,
   offset: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.number

src/PopperContent.js

@@ -24,6 +24,7 @@ const propTypes = {
   container: targetPropType,
   target: targetPropType.isRequired,
   modifiers: PropTypes.object,
+  positionFixed: PropTypes.bool,
   boundariesElement: PropTypes.oneOfType([PropTypes.string, DOMElement]),
   onClosed: PropTypes.func,
   fade: PropTypes.bool,
@@ -108,6 +109,7 @@ class PopperContent extends React.Component {
       tag,
       container,
       modifiers,
+      positionFixed,
       boundariesElement,
       onClosed,
       fade,
@@ -150,6 +152,7 @@ class PopperContent extends React.Component {
           referenceElement={this.targetNode}
           modifiers={extendedModifiers}
           placement={placement}
+          positionFixed={positionFixed}
         >
           {({ ref, style, placement, outOfBoundaries, arrowProps, scheduleUpdate }) => (
             <div ref={ref} style={style} className={popperClassName} x-placement={placement} x-out-of-boundaries={outOfBoundaries ? 'true' : undefined}>

src/TooltipPopoverWrapper.js

@@ -32,6 +32,7 @@ export const propTypes = {
     PropTypes.number
   ]),
   modifiers: PropTypes.object,
+  positionFixed: PropTypes.bool,
   offset: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   innerRef: PropTypes.oneOfType([
     PropTypes.func,
@@ -345,6 +346,7 @@ class TooltipPopoverWrapper extends React.Component {
       popperClassName,
       container,
       modifiers,
+      positionFixed,
       offset,
       fade,
       flip,
@@ -370,6 +372,7 @@ class TooltipPopoverWrapper extends React.Component {
         popperClassName={popperClasses}
         container={container}
         modifiers={modifiers}
+        positionFixed={positionFixed}
         offset={offset}
         cssModule={cssModule}
         fade={fade}

types/lib/Popover.d.ts

@@ -25,6 +25,7 @@ export interface PopoverProps extends React.HTMLAttributes<HTMLElement> {
   placementPrefix?: string;
   delay?: number | { show: number; hide: number };
   modifiers?: Popper.Modifiers;
+  positionFixed?: boolean;
   cssModule?: CSSModule;
   fade?: boolean;
   flip?: boolean;

types/lib/Tooltip.d.ts

@@ -21,6 +21,7 @@ export interface UncontrolledTooltipProps
   autohide?: boolean;
   placement?: Popper.Placement;
   modifiers?: Popper.Modifiers;
+  positionFixed?: boolean;
   cssModule?: CSSModule;
   fade?: boolean;
   flip?: boolean;