From ebd695bf9c9e94476b357923e23f8775f6ad9f52 Mon Sep 17 00:00:00 2001
From: Vitaly Rtishchev <rtivital@gmail.com>
Date: Fri, 12 Aug 2022 21:10:02 +0300
Subject: [PATCH] [@mantine/core] Tooltip: Allow usage with Popover.Target and
 other *.Target elements (#1897)

---
 src/mantine-core/src/Popover/Popover.story.tsx |  4 ++--
 src/mantine-core/src/Tooltip/Tooltip.tsx       | 10 +++++-----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/mantine-core/src/Popover/Popover.story.tsx b/src/mantine-core/src/Popover/Popover.story.tsx
index 3a96e74a824..effcd163122 100644
--- a/src/mantine-core/src/Popover/Popover.story.tsx
+++ b/src/mantine-core/src/Popover/Popover.story.tsx
@@ -85,7 +85,7 @@ export function WithinGroup() {
 export function PopoverTargetWithTooltip() {
   return (
     <div style={{ padding: 40 }}>
-      <Popover>
+      {/* <Popover>
         <Tooltip label="Tooltip first">
           <Popover.Target>
             <Button>Tooltip first</Button>
@@ -93,7 +93,7 @@ export function PopoverTargetWithTooltip() {
         </Tooltip>
 
         <Popover.Dropdown>Dropdown</Popover.Dropdown>
-      </Popover>
+      </Popover> */}
 
       <Popover>
         <Popover.Target>
diff --git a/src/mantine-core/src/Tooltip/Tooltip.tsx b/src/mantine-core/src/Tooltip/Tooltip.tsx
index 7989ab4fff4..2a69bd7a065 100644
--- a/src/mantine-core/src/Tooltip/Tooltip.tsx
+++ b/src/mantine-core/src/Tooltip/Tooltip.tsx
@@ -1,4 +1,4 @@
-import React, { cloneElement } from 'react';
+import React, { cloneElement, forwardRef } from 'react';
 import { isElement } from '@mantine/utils';
 import { useMergedRef } from '@mantine/hooks';
 import { getDefaultZIndex, useComponentDefaultProps } from '@mantine/styles';
@@ -66,7 +66,7 @@ const defaultProps: Partial<TooltipProps> = {
   positionDependencies: [],
 };
 
-export function Tooltip(props: TooltipProps) {
+export const Tooltip = forwardRef<HTMLElement, TooltipProps>((props, ref) => {
   const {
     children,
     position,
@@ -119,7 +119,7 @@ export function Tooltip(props: TooltipProps) {
     throw new Error(TOOLTIP_ERRORS.children);
   }
 
-  const targetRef = useMergedRef(tooltip.reference, (children as any).ref);
+  const targetRef = useMergedRef(tooltip.reference, (children as any).ref, ref);
 
   return (
     <>
@@ -131,7 +131,6 @@ export function Tooltip(props: TooltipProps) {
         >
           {(transitionStyles) => (
             <Box
-              {...others}
               {...tooltip.getFloatingProps({
                 ref: tooltip.floating,
                 className: classes.tooltip,
@@ -162,6 +161,7 @@ export function Tooltip(props: TooltipProps) {
       {cloneElement(
         children,
         tooltip.getReferenceProps({
+          ...others,
           [refProp]: targetRef,
           className: cx(className, children.props.className),
           ...children.props,
@@ -169,7 +169,7 @@ export function Tooltip(props: TooltipProps) {
       )}
     </>
   );
-}
+}) as any;
 
 Tooltip.Group = TooltipGroup;
 Tooltip.Floating = TooltipFloating;