feat(react/tooltip): allow tooltip title to render custom element

#216 fix #216
Mezzanine-UI · Jan 5, 2024 · 7d3c0bb · 7d3c0bb
1 parent 4515e08
commit 7d3c0bb
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 3 deletions.
diff --git a/packages/react/src/Tooltip/Tooltip.stories.tsx b/packages/react/src/Tooltip/Tooltip.stories.tsx
@@ -36,6 +36,26 @@ export const Basic = () => (
         />
       )}
     </Tooltip>
+    <Tooltip
+      title={(
+        <div style={{ display: 'flex', flexFlow: 'column' }}>
+          <span>Custom Element</span>
+          <Icon icon={InfoCircleFilledIcon} size={14} />
+        </div>
+      )}
+      options={{
+        placement: 'top-start',
+      }}
+    >
+      {({ onMouseEnter, onMouseLeave }) => (
+        <Icon
+          color="primary"
+          icon={InfoCircleFilledIcon}
+          onMouseEnter={onMouseEnter}
+          onMouseLeave={onMouseLeave}
+        />
+      )}
+    </Tooltip>
     <Tooltip
       title="預設文字"
       options={{
@@ -115,4 +135,3 @@ export const Placement = () => {
     </div>
   );
 };
-
diff --git a/packages/react/src/Tooltip/Tooltip.tsx b/packages/react/src/Tooltip/Tooltip.tsx
@@ -3,6 +3,7 @@ import {
   ReactElement,
   MouseEventHandler,
   useRef,
+  ReactNode,
 } from 'react';
 import { tooltipClasses as classes } from '@mezzanine-ui/core/tooltip';
 import { StrictModifiers } from '@popperjs/core';
@@ -18,7 +19,7 @@ const offsetModifier: StrictModifiers = {
   },
 };
 
-export interface TooltipProps extends Omit<PopperProps, 'children'> {
+export interface TooltipProps extends Omit<PopperProps, 'children' | 'title'> {
   /**
    * child function that can receive events
    */
@@ -34,7 +35,7 @@ export interface TooltipProps extends Omit<PopperProps, 'children'> {
   /**
    * title of tooltip
   */
-  title?: string;
+  title?: ReactNode;
 }
 
 /**