first commit

calcom/packages/ui/components/tooltip/Tooltip.docs.mdx

@@ -0,0 +1,20 @@
+import { Canvas, Meta } from "@storybook/blocks";
+import { Title, CustomArgsTable } from "@calcom/storybook/components";
+import { TooltipProvider } from "@radix-ui/react-tooltip";
+import { Tooltip } from "./Tooltip";
+
+import * as TooltipStories from "./Tooltip.stories";
+
+<Meta of={TooltipStories} />
+
+<Title title="Tooltip" suffix="Brief" subtitle="Version 2.0 — Last Update: 06 Jan 2023" />
+
+## Definition
+
+Tooltip components can be used to provide additional information about an element when the user hovers over or focuses on the element.
+
+<TooltipProvider>
+    <CustomArgsTable of={Tooltip} />
+</TooltipProvider>
+
+<Canvas of={TooltipStories.Default}/>

calcom/packages/ui/components/tooltip/Tooltip.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { VariantRow, VariantsTable } from "@calcom/storybook/components";
+
+import { Tooltip } from "./Tooltip";
+
+const meta: Meta<typeof Tooltip> = {
+  component: Tooltip,
+  title: "UI/Tooltip",
+};
+
+export default meta;
+type Story = StoryObj<typeof Tooltip>;
+
+export const Default: Story = {
+  name: "Tooltip",
+  parameters: {
+    hoverMsg: "Click to copy",
+    alertMsg: "Copied!",
+    content: "Copy me!",
+  },
+  render: (_, { parameters: { content, hoverMsg, alertMsg } }) => (
+    <VariantsTable titles={[]}>
+      <VariantRow variant="Default">
+        <Tooltip content={`${hoverMsg}`}>
+          <span
+            className="dark:text-darkgray-50 bg-brand-default dark:bg-darkgray-900 rounded-md p-2 text-gray-100 hover:cursor-pointer"
+            onClick={() => {
+              alert(`${alertMsg}`);
+            }}>
+            {content}
+          </span>
+        </Tooltip>
+      </VariantRow>
+    </VariantsTable>
+  ),
+};

calcom/packages/ui/components/tooltip/Tooltip.tsx

@@ -0,0 +1,54 @@
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import React from "react";
+
+import { useIsPlatform } from "@calcom/atoms/monorepo";
+import classNames from "@calcom/lib/classNames";
+
+export function Tooltip({
+  children,
+  content,
+  open,
+  defaultOpen,
+  onOpenChange,
+  delayDuration,
+  side = "top",
+  ...props
+}: {
+  children: React.ReactNode;
+  content: React.ReactNode;
+  delayDuration?: number;
+  open?: boolean;
+  defaultOpen?: boolean;
+  side?: "top" | "right" | "bottom" | "left";
+  onOpenChange?: (open: boolean) => void;
+} & TooltipPrimitive.TooltipContentProps) {
+  const isPlatform = useIsPlatform();
+  const Content = (
+    <TooltipPrimitive.Content
+      {...props}
+      className={classNames(
+        "calcom-tooltip",
+        side === "top" && "-mt-7",
+        side === "right" && "ml-2",
+        "bg-inverted text-inverted relative z-50 rounded-md px-2 py-1 text-xs font-semibold shadow-lg",
+        props.className && `${props.className}`
+      )}
+      side={side}
+      align="center">
+      {content}
+    </TooltipPrimitive.Content>
+  );
+
+  return (
+    <TooltipPrimitive.Root
+      delayDuration={delayDuration || 50}
+      open={open}
+      defaultOpen={defaultOpen}
+      onOpenChange={onOpenChange}>
+      <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
+      {isPlatform ? <>{Content}</> : <TooltipPrimitive.Portal>{Content}</TooltipPrimitive.Portal>}
+    </TooltipPrimitive.Root>
+  );
+}
+
+export default Tooltip;

calcom/packages/ui/components/tooltip/index.ts

@@ -0,0 +1 @@
+export { default as Tooltip } from "./Tooltip";