From 5da2ea4bed5ab704fe6d490835c5b97715743241 Mon Sep 17 00:00:00 2001
From: Haider Alshamma <haidera@nulogy.com>
Date: Tue, 12 Nov 2024 11:50:18 -0500
Subject: [PATCH] feat: add the ability to pass refs to Tooltips

---
 src/Tooltip/Tooltip.story.tsx | 11 ++++++++++-
 src/Tooltip/Tooltip.tsx       |  2 +-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/Tooltip/Tooltip.story.tsx b/src/Tooltip/Tooltip.story.tsx
index 326b632b2..3701ee69c 100644
--- a/src/Tooltip/Tooltip.story.tsx
+++ b/src/Tooltip/Tooltip.story.tsx
@@ -1,6 +1,5 @@
 import React from "react";
 import { Button, Box, Link, Flex, Text, Tooltip } from "../index";
-import styled from "styled-components";
 
 export default {
   title: "Components/Tooltip",
@@ -187,6 +186,16 @@ export const WithCustomComponent = () => (
   </Tooltip>
 );
 
+export const WithRef = () => {
+  const ref = React.useRef(null);
+
+  return (
+    <Tooltip tooltip="I am a Tooltip!" ref={ref}>
+      <Button> Button </Button>
+    </Tooltip>
+  );
+};
+
 const CustomComponent = React.forwardRef<HTMLDivElement, { [key: string]: any }>((props, forwardedRef) => (
   <span ref={forwardedRef} {...props}>
     <Text inline>This component uses the forwardedRef from the Tooltip wrapping it</Text>
diff --git a/src/Tooltip/Tooltip.tsx b/src/Tooltip/Tooltip.tsx
index 1cc206789..cb269421a 100644
--- a/src/Tooltip/Tooltip.tsx
+++ b/src/Tooltip/Tooltip.tsx
@@ -1,4 +1,4 @@
-import React, { LegacyRef } from "react";
+import React from "react";
 import { Popper } from "../Popper";
 import { generateId } from "../utils";
 import TooltipContainer from "./TooltipContainer";