[@mantine/core] Tooltip: Allow usage with Popover.Target and other *.…

…Target elements (#1897)
mantinedev · Aug 12, 2022 · ebd695b · ebd695b
1 parent f285b35
commit ebd695b
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 7 deletions.
diff --git a/src/mantine-core/src/Popover/Popover.story.tsx b/src/mantine-core/src/Popover/Popover.story.tsx
@@ -85,15 +85,15 @@ export function WithinGroup() {
 export function PopoverTargetWithTooltip() {
   return (
     <div style={{ padding: 40 }}>
-      <Popover>
+      {/* <Popover>
         <Tooltip label="Tooltip first">
           <Popover.Target>
             <Button>Tooltip first</Button>
           </Popover.Target>
         </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
@@ -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,14 +161,15 @@ export function Tooltip(props: TooltipProps) {
       {cloneElement(
         children,
         tooltip.getReferenceProps({
+          ...others,
           [refProp]: targetRef,
           className: cx(className, children.props.className),
           ...children.props,
         })
       )}
     </>
   );
-}
+}) as any;
 
 Tooltip.Group = TooltipGroup;
 Tooltip.Floating = TooltipFloating;