Tooltip: Do not wrap the tooltip and the trigger in a div (#4056)

* Do not wrap the tooltip and the trigger in a div

* add cahngeset

* align inactive item to the start after updating tooltip container

Author: broccolinisoup

.changeset/empty-starfishes-relate.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Tooltip2: Do not wrap the tooltip span and its trigger in a div

src/ActionList/Item.tsx

@@ -34,6 +34,7 @@ const InactiveIndicator: React.FC<{
         padding: 0,
         font: 'inherit',
         cursor: 'pointer',
+        display: 'flex',
       }}
       aria-labelledby={labelId}
     >

src/drafts/Tooltip/Tooltip.tsx

@@ -1,5 +1,4 @@
 import React, {Children, useEffect, useRef, useState} from 'react'
-import Box from '../../Box'
 import sx, {SxProp} from '../../sx'
 import {useId, useProvidedRefOrCreate} from '../../hooks'
 import {invariant} from '../../utils/invariant'
@@ -139,6 +138,7 @@ export type TriggerPropsType = {
   onBlur?: React.FocusEventHandler
   onFocus?: React.FocusEventHandler
   onMouseEnter?: React.MouseEventHandler
+  onMouseLeave?: React.MouseEventHandler
   ref?: React.RefObject<HTMLElement>
 }
 
@@ -268,7 +268,7 @@ export const Tooltip = React.forwardRef(
 
     return (
       <TooltipContext.Provider value={{tooltipId}}>
-        <Box onMouseLeave={() => closeTooltip()}>
+        <>
           {React.isValidElement(child) &&
             React.cloneElement(child as React.ReactElement<TriggerPropsType>, {
               ref: triggerRef,
@@ -288,6 +288,10 @@ export const Tooltip = React.forwardRef(
                 openTooltip()
                 child.props.onMouseEnter?.(event)
               },
+              onMouseLeave: (event: React.MouseEvent) => {
+                closeTooltip()
+                child.props.onMouseLeave?.(event)
+              },
             })}
           <StyledTooltip
             ref={tooltipElRef}
@@ -298,10 +302,13 @@ export const Tooltip = React.forwardRef(
             // stop AT from announcing the tooltip twice when it is a label type because it will be announced with "aria-labelledby"
             aria-hidden={type === 'label' ? true : undefined}
             id={`tooltip-${tooltipId}`}
+            // mouse leave and enter on the tooltip itself is needed to keep the tooltip open when the mouse is over the tooltip
+            onMouseEnter={openTooltip}
+            onMouseLeave={closeTooltip}
           >
             {text}
           </StyledTooltip>
-        </Box>
+        </>
       </TooltipContext.Provider>
     )
   },