fix: tooltips

keephq · Oct 14, 2024 · 6758633 · 6758633
1 parent 4233ab1
commit 6758633
Show file tree

Hide file tree

Showing 6 changed files with 340 additions and 63 deletions.
diff --git a/keep-ui/app/rules/AIGenRules.tsx b/keep-ui/app/rules/AIGenRules.tsx
@@ -40,7 +40,7 @@ import { useSession } from "next-auth/react";
 import { getApiURL } from "utils/apiUrl";
 import useSWR, { mutate } from "swr";
 import Loading from "app/loading";
-import { Button } from "@/components/ui";
+import { Button, Tooltip } from "@/components/ui";
 
 const columnHelper = createColumnHelper<AIGeneratedRule>();
 
@@ -203,30 +203,54 @@ export const AIGenRules: React.FC = () => {
             const rule = info.row.original;
             return (
               <div className="flex space-x-2">
-                <Icon
-                  icon={InformationCircleIcon}
-                  tooltip={`Thinking behind the rule: ${rule.ChainOfThought}`}
-                  size="xs"
-                  color="gray"
-                  className="ml-1"
-                  variant="solid"
-                />
-                <Icon
-                  icon={ExclamationTriangleIcon}
-                  tooltip={`Why this rule is too general: ${rule.WhyTooGeneral}`}
-                  size="xs"
-                  color="gray"
-                  className="ml-1"
-                  variant="solid"
-                />
-                <Icon
-                  icon={QuestionMarkCircleIcon}
-                  tooltip={`Why this rule is too specific: ${rule.WhyTooSpecific}`}
-                  size="xs"
-                  color="gray"
-                  className="ml-1"
-                  variant="solid"
-                />
+                <Tooltip
+                  content={
+                    <>
+                      <p className="font-bold">Thinking behind the rule</p>
+                      {rule.ChainOfThought}
+                    </>
+                  }
+                >
+                  <Icon
+                    icon={InformationCircleIcon}
+                    size="xs"
+                    color="gray"
+                    className="ml-1"
+                    variant="solid"
+                  />
+                </Tooltip>
+                <Tooltip
+                  content={
+                    <>
+                      <p className="font-bold">Why rule may be too general</p>
+                      {rule.WhyTooGeneral}
+                    </>
+                  }
+                >
+                  <Icon
+                    icon={ExclamationTriangleIcon}
+                    size="xs"
+                    color="gray"
+                    className="ml-1"
+                    variant="solid"
+                  />
+                </Tooltip>
+                <Tooltip
+                  content={
+                    <>
+                      <p className="font-bold">Why rule may be too specific</p>
+                      {rule.WhyTooSpecific}
+                    </>
+                  }
+                >
+                  <Icon
+                    icon={QuestionMarkCircleIcon}
+                    size="xs"
+                    color="gray"
+                    className="ml-1"
+                    variant="solid"
+                  />
+                </Tooltip>
               </div>
             );
           },

diff --git a/keep-ui/components/ui/Tooltip.tsx b/keep-ui/components/ui/Tooltip.tsx
@@ -0,0 +1,95 @@
+// Tremor Tooltip [v0.0.2]
+
+"use client";
+
+import React from "react";
+import * as TooltipPrimitives from "@radix-ui/react-tooltip";
+import cx from "clsx";
+
+interface TooltipProps
+  extends Omit<TooltipPrimitives.TooltipContentProps, "content" | "onClick">,
+    Pick<
+      TooltipPrimitives.TooltipProps,
+      "open" | "defaultOpen" | "onOpenChange" | "delayDuration"
+    > {
+  content: React.ReactNode;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  side?: "bottom" | "left" | "top" | "right";
+  showArrow?: boolean;
+  triggerAsChild?: boolean;
+}
+
+const Tooltip = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitives.Content>,
+  TooltipProps
+>(
+  (
+    {
+      children,
+      className,
+      content,
+      delayDuration,
+      defaultOpen,
+      open,
+      onClick,
+      onOpenChange,
+      showArrow = true,
+      side,
+      sideOffset = 10,
+      triggerAsChild = false,
+      ...props
+    }: TooltipProps,
+    forwardedRef
+  ) => {
+    return (
+      <TooltipPrimitives.Provider delayDuration={150}>
+        <TooltipPrimitives.Root
+          open={open}
+          defaultOpen={defaultOpen}
+          onOpenChange={onOpenChange}
+          delayDuration={delayDuration}
+          tremor-id="tremor-raw"
+        >
+          <TooltipPrimitives.Trigger onClick={onClick} asChild={triggerAsChild}>
+            {children}
+          </TooltipPrimitives.Trigger>
+          <TooltipPrimitives.Portal>
+            <TooltipPrimitives.Content
+              ref={forwardedRef}
+              side={side}
+              sideOffset={sideOffset}
+              align="center"
+              className={cx(
+                // base
+                "max-w-60 select-none rounded-md px-2.5 py-1.5 text-sm leading-5 shadow-md",
+                // text color
+                "text-gray-50 dark:text-gray-900",
+                // background color
+                "bg-gray-900 dark:bg-gray-50",
+                // transition
+                "will-change-[transform,opacity]",
+                "data-[side=bottom]:animate-slideDownAndFade data-[side=left]:animate-slideLeftAndFade data-[side=right]:animate-slideRightAndFade data-[side=top]:animate-slideUpAndFade data-[state=closed]:animate-hide",
+                className
+              )}
+              {...props}
+            >
+              {content}
+              {showArrow ? (
+                <TooltipPrimitives.Arrow
+                  className="border-none fill-gray-900 dark:fill-gray-50"
+                  width={12}
+                  height={7}
+                  aria-hidden="true"
+                />
+              ) : null}
+            </TooltipPrimitives.Content>
+          </TooltipPrimitives.Portal>
+        </TooltipPrimitives.Root>
+      </TooltipPrimitives.Provider>
+    );
+  }
+);
+
+Tooltip.displayName = "Tooltip";
+
+export { Tooltip, type TooltipProps };
diff --git a/keep-ui/components/ui/index.ts b/keep-ui/components/ui/index.ts
@@ -4,3 +4,4 @@ export { Textarea } from "./Textarea";
 export { Button } from "./Button";
 export { Link } from "./Link";
 export { EmptyStateCard } from "./EmptyStateCard";
+export { Tooltip } from "./Tooltip";