Add usePortal prop to VuiTooltip. (#322)

Author: cjcenizal

src/docs/pages/tooltip/Tooltip.tsx

@@ -1,20 +1,29 @@
 import { BiEdit } from "react-icons/bi";
-import { VuiButtonPrimary, VuiIcon, VuiTooltip } from "../../../lib";
+import { VuiButtonPrimary, VuiIcon, VuiSpacer, VuiToggle, VuiTooltip } from "../../../lib";
+import { useState } from "react";
 
 export const Tooltip = () => {
+  const [usePortal, setUsePortal] = useState(false);
+
   return (
-    <VuiTooltip tip="Watchers will be notified of your changes and an audit trail will be created.">
-      <VuiButtonPrimary
-        icon={
-          <VuiIcon>
-            <BiEdit />
-          </VuiIcon>
-        }
-        color="neutral"
-        href="https://www.vectara.com"
-      >
-        Edit
-      </VuiButtonPrimary>
-    </VuiTooltip>
+    <>
+      <VuiToggle checked={usePortal} onChange={(e) => setUsePortal(e.target.checked)} label="Use portal" />
+
+      <VuiSpacer size="m" />
+
+      <VuiTooltip tip="Watchers will be notified of your changes and an audit trail will be created.">
+        <VuiButtonPrimary
+          icon={
+            <VuiIcon>
+              <BiEdit />
+            </VuiIcon>
+          }
+          color="neutral"
+          href="https://www.vectara.com"
+        >
+          Edit
+        </VuiButtonPrimary>
+      </VuiTooltip>
+    </>
   );
 };

src/lib/components/button/IconButton.tsx

@@ -26,6 +26,7 @@ type Props = {
   tooltip?: {
     darkTheme?: TooltipProps["darkTheme"];
     position?: TooltipProps["position"];
+    usePortal?: TooltipProps["usePortal"];
   };
 };
 

src/lib/components/tooltip/Tooltip.tsx

@@ -1,19 +1,21 @@
 import { useState, cloneElement } from "react";
 import { Tooltip, TooltipRefProps } from "react-tooltip";
 import { useVuiContext } from "../context/Context";
+import { VuiPortal } from "../portal/Portal";
 
 export type Props = {
   children: React.ReactNode;
   tip: React.ReactNode;
   darkTheme?: boolean;
   position?: TooltipRefProps["place"];
+  usePortal?: boolean;
 };
 
 const generateTooltipId = () => {
   return `tooltip-${Math.random().toString(36).slice(2, 9)}`;
 };
 
-export const VuiTooltip = ({ children, darkTheme, position, tip }: Props) => {
+export const VuiTooltip = ({ children, darkTheme, position, tip, usePortal }: Props) => {
   const { getThemeStyle } = useVuiContext();
   const [id] = useState(generateTooltipId());
 
@@ -25,13 +27,16 @@ export const VuiTooltip = ({ children, darkTheme, position, tip }: Props) => {
   // the light theme class in order to enable having a different theme than the
   // parent.
   const style = getThemeStyle(darkTheme ? "dark" : "light");
+  const tooltip = (
+    <Tooltip id={id} offset={10} className="vuiTooltip" style={style} opacity={1} place={position}>
+      {tip}
+    </Tooltip>
+  );
 
   return (
     <>
       {target}
-      <Tooltip id={id} offset={10} className="vuiTooltip" style={style} opacity={1} place={position}>
-        {tip}
-      </Tooltip>
+      {usePortal ? <VuiPortal>{tooltip}</VuiPortal> : tooltip}
     </>
   );
 };