feat: Allow Tooltip label to be a string or React component (#2596)

Co-authored-by: Brandon Lenz <[email protected]>

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}