Merge pull request #63 from solved-ac/feature/tooltip-interactions

feat(Tooltip): activateOnHover, activateOnClick

Author: shiftpsh

example/src/stories/Tooltip.stories.tsx

@@ -51,6 +51,17 @@ export default {
         'Whether to make the tooltip interactive - if set to true, the tooltip contents will receive pointer events',
       defaultValue: false,
     },
+    activateOnHover: {
+      control: 'boolean',
+      description: 'Whether to activate the tooltip on mouse hover',
+      defaultValue: true,
+    },
+    activateOnClick: {
+      control: 'boolean',
+      description:
+        'Whether to activate the tooltip on mouse click - repeated clicks will toggle the tooltip',
+      defaultValue: false,
+    },
   },
 } as Meta<typeof Tooltip>
 

src/components/Tooltip.tsx

@@ -8,6 +8,7 @@ import {
   offset,
   safePolygon,
   shift,
+  useClick,
   useFloating,
   useHover,
   useInteractions,
@@ -68,6 +69,8 @@ export type TooltipProps = {
   keepOpen?: boolean
   place?: TooltipPlacement
   interactive?: boolean
+  activateOnHover?: boolean
+  activateOnClick?: boolean
 } & (
   | {
       noDefaultStyles: false
@@ -123,6 +126,8 @@ export const Tooltip: React.FC<TooltipProps> = (props) => {
     keepOpen = false,
     place,
     interactive = false,
+    activateOnHover = true,
+    activateOnClick = false,
     ...cardProps
   } = props
   const [isOpen, setIsOpen] = useState(false)
@@ -157,12 +162,16 @@ export const Tooltip: React.FC<TooltipProps> = (props) => {
 
   const { getReferenceProps, getFloatingProps } = useInteractions([
     useHover(context, {
+      enabled: activateOnHover,
       delay: 200,
       move: true,
       handleClose: safePolygon({
         buffer: 1,
       }),
     }),
+    useClick(context, {
+      enabled: activateOnClick,
+    }),
   ])
 
   const RenderComponent = noBackground ? motion.div : TooltipContainer