@indico-data/design-system 3.6.2 → 3.6.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "3.6.2",
+  "version": "3.6.3",
   "description": "",
   "author": "",
   "main": "lib/index.js",

package/src/components/tooltip/Tooltip.stories.tsx

@@ -71,6 +71,16 @@ const meta: Meta = {
         },
       },
     },
+    positionStrategy: {
+      control: 'select',
+      options: ['absolute', 'fixed'],
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'absolute | fixed',
+        },
+      },
+    },
     children: {
       control: false,
       table: {

package/src/components/tooltip/Tooltip.tsx

@@ -1,5 +1,5 @@
 import { CSSProperties } from 'react';
-import { PlacesType, Tooltip as ReactTooltip } from 'react-tooltip';
+import { PlacesType, Tooltip as ReactTooltip, PositionStrategy } from 'react-tooltip';
 
 export interface TooltipProps {
   id: string;
@@ -9,14 +9,16 @@ export interface TooltipProps {
   delayShow?: number;
   /** The delay in milliseconds before the tooltip is hidden */
   delayHide?: number;
-  children: React.ReactNode;
   /** The placement of the tooltip */
   place?: PlacesType;
   /** The width of the tooltip */
   width?: CSSProperties['width'];
   /** The max width of the tooltip */
   maxWidth?: CSSProperties['maxWidth'];
+  /** The position strategy of the tooltip */
+  positionStrategy?: PositionStrategy;
   /** The content of the tooltip */
+  children: React.ReactNode;
   [key: string]: any;
 }
 
@@ -30,6 +32,7 @@ export const Tooltip = ({
   width = 'max-content',
   maxWidth,
   opacity = 1,
+  positionStrategy = 'absolute',
   ...rest
 }: TooltipProps) => {
   return (
@@ -51,6 +54,7 @@ export const Tooltip = ({
       delayShow={delayShow}
       delayHide={delayHide}
       opacity={opacity}
+      positionStrategy={positionStrategy}
       {...rest}
     >
       {children}