feat: hidden prop and data attribute

Author: gabrieljablonski

src/components/Tooltip/Tooltip.tsx

@@ -25,6 +25,7 @@ const Tooltip = ({
   delayShow = 0,
   delayHide = 0,
   float = false,
+  hidden = false,
   noArrow = false,
   clickable = false,
   closeOnEsc = false,
@@ -538,7 +539,7 @@ const Tooltip = ({
     }
   }, [id, anchorSelect])
 
-  const canShow = content && show && Object.keys(inlineStyles).length > 0
+  const canShow = !hidden && content && show && Object.keys(inlineStyles).length > 0
 
   return rendered ? (
     <WrapperElement

src/components/Tooltip/TooltipTypes.d.ts

@@ -24,6 +24,7 @@ export type DataAttribute =
   | 'delay-show'
   | 'delay-hide'
   | 'float'
+  | 'hidden'
 
 /**
  * @description floating-ui middleware
@@ -62,6 +63,7 @@ export interface ITooltip {
   delayShow?: number
   delayHide?: number
   float?: boolean
+  hidden?: boolean
   noArrow?: boolean
   clickable?: boolean
   closeOnEsc?: boolean

src/components/TooltipController/TooltipController.tsx

@@ -35,6 +35,7 @@ const TooltipController = ({
   delayShow = 0,
   delayHide = 0,
   float = false,
+  hidden = false,
   noArrow = false,
   clickable = false,
   closeOnEsc = false,
@@ -53,6 +54,7 @@ const TooltipController = ({
   const [tooltipDelayShow, setTooltipDelayShow] = useState(delayShow)
   const [tooltipDelayHide, setTooltipDelayHide] = useState(delayHide)
   const [tooltipFloat, setTooltipFloat] = useState(float)
+  const [tooltipHidden, setTooltipHidden] = useState(hidden)
   const [tooltipWrapper, setTooltipWrapper] = useState<WrapperType>(wrapper)
   const [tooltipEvents, setTooltipEvents] = useState(events)
   const [tooltipPositionStrategy, setTooltipPositionStrategy] = useState(positionStrategy)
@@ -112,6 +114,9 @@ const TooltipController = ({
       float: (value) => {
         setTooltipFloat(value === null ? float : value === 'true')
       },
+      hidden: (value) => {
+        setTooltipHidden(value === null ? hidden : value === 'true')
+      },
     }
     // reset unset data attributes to default values
     // without this, data attributes from the last active anchor will still be used
@@ -239,6 +244,7 @@ const TooltipController = ({
     delayShow: tooltipDelayShow,
     delayHide: tooltipDelayHide,
     float: tooltipFloat,
+    hidden: tooltipHidden,
     noArrow,
     clickable,
     closeOnEsc,

src/components/TooltipController/TooltipControllerTypes.d.ts

@@ -42,6 +42,7 @@ export interface ITooltipController {
   delayShow?: number
   delayHide?: number
   float?: boolean
+  hidden?: boolean
   noArrow?: boolean
   clickable?: boolean
   closeOnEsc?: boolean
@@ -70,5 +71,6 @@ declare module 'react' {
     'data-tooltip-delay-show'?: number
     'data-tooltip-delay-hide'?: number
     'data-tooltip-float'?: boolean
+    'data-tooltip-hidden'?: boolean
   }
 }