From bc0100816a0bcba797562a02ea3b32543f850904 Mon Sep 17 00:00:00 2001
From: Leo Singer <leo.p.singer@nasa.gov>
Date: Fri, 20 Oct 2023 12:14:45 -0400
Subject: [PATCH] feat: Allow Tooltip label to be a string or React component
 (#2596)

Co-authored-by: Brandon Lenz <15805554+brandonlenz@users.noreply.github.com>
---
 src/components/Tooltip/Tooltip.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
index 22649e432e..ca177a3ae0 100644
--- a/src/components/Tooltip/Tooltip.tsx
+++ b/src/components/Tooltip/Tooltip.tsx
@@ -12,7 +12,8 @@ import classnames from 'classnames'
 import { isElementInViewport, calculateMarginOffset } from './utils'
 
 type TooltipProps<T> = {
-  label: string
+  label: ReactNode
+  title?: string
   position?: 'top' | 'bottom' | 'left' | 'right' | undefined
   wrapperclasses?: string
   className?: string
@@ -202,7 +203,7 @@ export function Tooltip<FCProps = DefaultTooltipProps>(
   })
 
   if (isCustomProps(props)) {
-    const { label, asCustom, children, ...remainingProps } = props
+    const { label, title, asCustom, children, ...remainingProps } = props
     const customProps: FCProps = remainingProps as unknown as FCProps
 
     const triggerClasses = classnames('usa-tooltip__trigger', className)
@@ -232,7 +233,7 @@ export function Tooltip<FCProps = DefaultTooltipProps>(
         {triggerElement}
         <span
           data-testid="tooltipBody"
-          title={label}
+          title={title ?? (typeof label === 'string' ? label : undefined)}
           id={tooltipID.current}
           ref={tooltipBodyRef}
           className={tooltipBodyClasses}
@@ -244,7 +245,7 @@ export function Tooltip<FCProps = DefaultTooltipProps>(
       </span>
     )
   } else {
-    const { label, children, ...remainingProps } = props
+    const { label, title, children, ...remainingProps } = props
 
     const triggerClasses = classnames(
       'usa-button',
@@ -273,7 +274,7 @@ export function Tooltip<FCProps = DefaultTooltipProps>(
         </button>
         <span
           data-testid="tooltipBody"
-          title={label}
+          title={title ?? (typeof label === 'string' ? label : undefined)}
           id={tooltipID.current}
           ref={tooltipBodyRef}
           className={tooltipBodyClasses}