Add tooltip changes (#149)

ClickHouse · Sep 26, 2023 · a13fd34 · a13fd34 · vercel · Sep 26, 2023
1 parent f869eab
commit a13fd34
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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}