feat: tooltip stay open/closed

Author: brenoliradev

packages/ui/src/components/Floating/Floating.tsx

@@ -3,7 +3,7 @@
 import type { Placement } from "@floating-ui/core";
 import { autoUpdate, useFocus } from "@floating-ui/react";
 import type { ComponentProps, FC, ReactNode } from "react";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { twMerge } from "tailwind-merge";
 import { useBaseFLoating, useFloatingInteractions } from "../../hooks/use-floating";
 import { getArrowPlacement } from "./helpers";
@@ -43,6 +43,7 @@ export interface FloatingProps extends Omit<ComponentProps<"div">, "content" | "
   theme: FlowbiteFloatingTheme;
   trigger?: "hover" | "click";
   minWidth?: number;
+  isOpen: boolean | null;
 }
 
 /**
@@ -59,10 +60,17 @@ export const Floating: FC<FloatingProps> = ({
   theme,
   trigger = "hover",
   minWidth,
+  isOpen = null,
   ...props
 }) => {
   const arrowRef = useRef<HTMLDivElement>(null);
-  const [open, setOpen] = useState(false);
+  const [innerOpen, setOpen] = useState(false);
+
+  const open = useMemo(() => {
+    if (isOpen === null) return innerOpen;
+
+    return isOpen;
+  }, [innerOpen, isOpen]);
 
   const floatingProperties = useBaseFLoating({
     open,

packages/ui/src/components/Tooltip/Tooltip.stories.tsx

@@ -36,6 +36,24 @@ NoArrow.args = {
   children: <Button>Tooltip with no arrow</Button>,
 };
 
+export const StillOpen = Template.bind({});
+StillOpen.storyName = "Still open";
+StillOpen.args = {
+  content: "Tooltip content",
+  isOpen: true,
+  placement: "bottom",
+  children: <Button>Tooltip that doesn't close</Button>,
+};
+
+export const StillClosed = Template.bind({});
+StillClosed.storyName = "Still closed";
+StillClosed.args = {
+  content: "Tooltip content",
+  isOpen: false,
+  placement: "bottom",
+  children: <Button>Tooltip that doesn't open</Button>,
+};
+
 export const SlowAnimation = Template.bind({});
 SlowAnimation.storyName = "Slow animation";
 SlowAnimation.args = {

packages/ui/src/components/Tooltip/Tooltip.tsx

@@ -15,6 +15,7 @@ export interface TooltipProps extends Omit<ComponentProps<"div">, "content" | "s
   style?: "dark" | "light" | "auto";
   theme?: DeepPartial<FlowbiteTooltipTheme>;
   trigger?: "hover" | "click";
+  isOpen?: boolean | null;
 }
 
 /**
@@ -30,6 +31,7 @@ export const Tooltip: FC<TooltipProps> = ({
   style = "dark",
   theme: customTheme = {},
   trigger = "hover",
+  isOpen = null,
   ...props
 }) => {
   const theme = mergeDeep(getTheme().tooltip, customTheme);
@@ -44,6 +46,7 @@ export const Tooltip: FC<TooltipProps> = ({
       theme={theme}
       trigger={trigger}
       className={className}
+      isOpen={isOpen}
       {...props}
     >
       {children}