From a13fd3449de65d41e14fbb5620239361f508a59d Mon Sep 17 00:00:00 2001
From: Vineeth Asok Kumar <me@vineethasok.com>
Date: Tue, 26 Sep 2023 12:13:09 +0200
Subject: [PATCH] Add tooltip changes (#149)

---
 src/components/Tooltip/Tooltip.stories.tsx |  4 +---
 src/components/Tooltip/Tooltip.test.tsx    |  4 +---
 src/components/Tooltip/Tooltip.tsx         | 22 +++++++++++++++-------
 3 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/components/Tooltip/Tooltip.stories.tsx b/src/components/Tooltip/Tooltip.stories.tsx
index 59bd53ce..3c28378d 100644
--- a/src/components/Tooltip/Tooltip.stories.tsx
+++ b/src/components/Tooltip/Tooltip.stories.tsx
@@ -16,9 +16,7 @@ const TooltipExample = ({ showArrow, side, ...props }: Props) => {
       }}
     >
       <Tooltip {...props}>
-        <Tooltip.Trigger>
-          <div>Tooltip Trigger(Hover)</div>
-        </Tooltip.Trigger>
+        <Tooltip.Trigger>Tooltip Trigger(Hover)</Tooltip.Trigger>
         <Tooltip.Content
           showArrow={showArrow}
           side={side}
diff --git a/src/components/Tooltip/Tooltip.test.tsx b/src/components/Tooltip/Tooltip.test.tsx
index 729622d7..e67354ee 100644
--- a/src/components/Tooltip/Tooltip.test.tsx
+++ b/src/components/Tooltip/Tooltip.test.tsx
@@ -8,9 +8,7 @@ describe("Tooltip", () => {
   const renderTooltip = (props: TooltipProps) =>
     renderCUI(
       <Tooltip {...props}>
-        <Tooltip.Trigger>
-          <div>Hover Here</div>
-        </Tooltip.Trigger>
+        <Tooltip.Trigger>Hover Here</Tooltip.Trigger>
         <Tooltip.Content data-testid="tooltip-content">Tooltip content</Tooltip.Content>
       </Tooltip>
     );
diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
index cc4eea54..b7ebc066 100644
--- a/src/components/Tooltip/Tooltip.tsx
+++ b/src/components/Tooltip/Tooltip.tsx
@@ -1,16 +1,16 @@
 import * as RadixTooltip from "@radix-ui/react-tooltip";
+import { HTMLAttributes } from "react";
 import styled from "styled-components";
 
 export const Tooltip = ({ children, ...props }: RadixTooltip.TooltipProps) => {
   return <RadixTooltip.Root {...props}>{children}</RadixTooltip.Root>;
 };
 
-const TooltipTrigger = (props: RadixTooltip.TooltipTriggerProps) => {
+const TooltipTrigger = (props: HTMLAttributes<HTMLDivElement>) => {
   return (
-    <RadixTooltip.Trigger
-      asChild
-      {...props}
-    />
+    <RadixTooltip.Trigger asChild>
+      <div {...props} />
+    </RadixTooltip.Trigger>
   );
 };
 TooltipTrigger.displayName = "TooltipTrigger";
@@ -37,10 +37,18 @@ const Arrow = styled.svg`
   `};
 `;
 
-const TooltipContent = ({ showArrow, children, ...props }: TooltipContentProps) => {
+const TooltipContent = ({
+  showArrow,
+  children,
+  sideOffset = 6,
+  ...props
+}: TooltipContentProps) => {
   return (
     <RadixTooltip.Portal>
-      <RadixTooltipContent {...props}>
+      <RadixTooltipContent
+        sideOffset={sideOffset}
+        {...props}
+      >
         {showArrow && (
           <Arrow
             as={RadixTooltip.Arrow}