feat(ui): add disable prop to Tooltip (#539)

hazelcast · Mar 6, 2024 · cf4b678 · cf4b678
1 parent f73ed61
commit cf4b678
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/packages/ui/__stories__/Tooltip.stories.tsx b/packages/ui/__stories__/Tooltip.stories.tsx
@@ -142,6 +142,18 @@ Invisible.args = {
   id: 'tooltip-story-invisible',
 }
 
+export const Visible = Template.bind({})
+Visible.args = {
+  visible: true,
+  id: 'tooltip-story-visible',
+}
+
+export const Disabled = Template.bind({})
+Disabled.args = {
+  disabled: true,
+  id: 'tooltip-story-disabled',
+}
+
 export const WithTooltip: Story<TooltipProps> = () => (
   <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: 320 }}>
     <Tooltip

diff --git a/packages/ui/src/Tooltip.tsx b/packages/ui/src/Tooltip.tsx
@@ -54,6 +54,7 @@ export type TooltipProps = {
   updateToken?: ReactText | boolean
   tooltipContainer?: PortalContainer
   wordBreak?: CSSProperties['wordBreak']
+  disabled?: boolean
 }
 
 /**
@@ -86,6 +87,7 @@ export const Tooltip: FC<TooltipProps> = ({
   updateToken,
   tooltipContainer = 'body',
   hoverAbleTooltip = true,
+  disabled = false,
 }) => {
   const [isShown, setShown] = useState<boolean>(false)
   const timeoutRef = useRef<NodeJS.Timeout | null>(null)
@@ -167,7 +169,7 @@ export const Tooltip: FC<TooltipProps> = ({
   )
 
   // Makes sure "visible" prop can override local "isShown" state
-  const isTooltipVisible = visibilityOverride ?? isShown
+  const isTooltipVisible = !disabled && (visibilityOverride || isShown)
 
   // Update the tooltip's position (useful when resizing table columns)
   useLayoutEffect(() => {