tooltip use children props

massalabs · Jan 26, 2024 · 1537c26 · 1537c26
1 parent b520971
commit 1537c26
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 7 deletions.
diff --git a/src/components/Tooltip/Tooltip.stories.tsx b/src/components/Tooltip/Tooltip.stories.tsx
@@ -14,10 +14,9 @@ export const _Tooltip = {
 export const _TooltipCustomIcon = {
   render: () => (
     <>
-      <Tooltip
-        content={'Hello I am tooltip content'}
-        icon={<FiAirplay size={48} className="text-s-warning" />}
-      />
+      <Tooltip content={'Hello I am tooltip content'}>
+        <FiAirplay size={48} className="text-s-warning" />
+      </Tooltip>
     </>
   ),
 };
diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
@@ -5,12 +5,12 @@ import { ComponentPropsWithoutRef, useState } from 'react';
 import { FiHelpCircle } from 'react-icons/fi';
 
 export interface TooltipProps extends ComponentPropsWithoutRef<'div'> {
-  icon?: ReactNode;
+  children?: ReactNode;
   customClass?: string;
 }
 
 export function Tooltip(props: TooltipProps) {
-  const { content, icon, customClass, ...rest } = props;
+  const { content, children, customClass = '', ...rest } = props;
 
   const [showTooltip, setShowTooltip] = useState(false);
 
@@ -24,7 +24,7 @@ export function Tooltip(props: TooltipProps) {
       onMouseEnter={() => setShowTooltip(true)}
       onMouseLeave={() => setShowTooltip(false)}
     >
-      {icon || defaultIcon}
+      {children || defaultIcon}
       {showTooltip && (
         <div
           className={`w-fit z-10 absolute bg-tertiary p-3 rounded-lg text-neutral ml-2 ${customClass}`}