improve tooltip (#397)

massalabs · Feb 6, 2024 · 7ea8677 · 7ea8677
1 parent 97e7381
commit 7ea8677
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 7 deletions.
diff --git a/src/components/Token/Token.tsx b/src/components/Token/Token.tsx
@@ -60,7 +60,7 @@ export function Token(props: TokenProps) {
           <p className="mas-menu-active">{`${name} (${symbol})`} </p>
           <span className="flex items-center gap-2">
             <p className="mas-menu">{formattedBalance}</p>
-            <Tooltip content={rawBalance} />
+            <Tooltip body={rawBalance} />
           </span>
         </div>
       </div>

diff --git a/src/components/Tooltip/Tooltip.stories.tsx b/src/components/Tooltip/Tooltip.stories.tsx
@@ -6,15 +6,15 @@ export default { title: 'Components/Tooltip', component: Tooltip };
 export const _Tooltip = {
   render: () => (
     <>
-      <Tooltip content={'Hello I am tooltip content'} />
+      <Tooltip body={'Hello I am tooltip content'} />
     </>
   ),
 };
 
 export const _TooltipCustomIcon = {
   render: () => (
     <>
-      <Tooltip content={'Hello I am tooltip content'}>
+      <Tooltip body={<p>Hello I am tooltip content</p>}>
         <FiAirplay size={48} className="text-s-warning" />
       </Tooltip>
     </>

diff --git a/src/components/Tooltip/Tooltip.test.tsx b/src/components/Tooltip/Tooltip.test.tsx
@@ -4,7 +4,7 @@ import { Tooltip } from '.';
 
 describe('Components | Toggle', () => {
   test('it should render', () => {
-    render(<Tooltip content={'Hello I am tooltip content'} />);
+    render(<Tooltip body={'Hello I am tooltip content'} />);
 
     let tooltip = screen.getByTestId('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'> {
-  children?: ReactNode;
   customClass?: string;
+  body: ReactNode | string;
 }
 
 export function Tooltip(props: TooltipProps) {
-  const { content, children, customClass = '', ...rest } = props;
+  const { body, children, customClass = '', ...rest } = props;
 
   const [showTooltip, setShowTooltip] = useState(false);
 
@@ -29,7 +29,7 @@ export function Tooltip(props: TooltipProps) {
         <div
           className={`w-fit z-10 absolute bg-tertiary p-3 rounded-lg text-neutral ml-2 ${customClass}`}
         >
-          {content}
+          {body}
         </div>
       )}
     </div>