feat(nav): Add tooltips to buttons/menus and reduce delay

static/app/components/nav/primary/components.tsx

@@ -53,12 +53,20 @@ function recordPrimaryItemClick(analyticsKey: string, organization: Organization
 
 export function SidebarItem({
   children,
+  label,
+  showLabel,
   ...props
-}: {children: React.ReactNode} & React.HTMLAttributes<HTMLElement>) {
+}: {
+  children: React.ReactNode;
+  label: string;
+  showLabel: boolean;
+} & React.HTMLAttributes<HTMLElement>) {
   const {layout} = useNavContext();
   return (
     <IconDefaultsProvider legacySize={layout === NavLayout.MOBILE ? '14px' : '16px'}>
-      <li {...props}>{children}</li>
+      <Tooltip title={label} disabled={showLabel} position="right" skipWrapper delay={0}>
+        <li {...props}>{children}</li>
+      </Tooltip>
     </IconDefaultsProvider>
   );
 }
@@ -76,7 +84,7 @@ export function SidebarMenu({
   const showLabel = forceLabel || layout === NavLayout.MOBILE;
 
   return (
-    <SidebarItem>
+    <SidebarItem label={label} showLabel={showLabel}>
       <DropdownMenu
         position={layout === NavLayout.MOBILE ? 'bottom' : 'right-end'}
         shouldApplyMinWidth={false}
@@ -120,21 +128,19 @@ export function SidebarLink({
   const showLabel = forceLabel || layout === NavLayout.MOBILE;
 
   return (
-    <SidebarItem>
-      <Tooltip title={label} disabled={showLabel} position="right" skipWrapper>
-        <NavLink
-          {...linkProps}
-          onClick={() => recordPrimaryItemClick(analyticsKey, organization)}
-          aria-selected={isActive}
-          aria-current={isActive ? 'page' : undefined}
-          aria-label={showLabel ? undefined : label}
-          isMobile={layout === NavLayout.MOBILE}
-        >
-          <InteractionStateLayer hasSelectedBackground={isActive} />
-          {children}
-          {showLabel ? label : null}
-        </NavLink>
-      </Tooltip>
+    <SidebarItem label={label} showLabel={showLabel}>
+      <NavLink
+        {...linkProps}
+        onClick={() => recordPrimaryItemClick(analyticsKey, organization)}
+        aria-selected={isActive}
+        aria-current={isActive ? 'page' : undefined}
+        aria-label={showLabel ? undefined : label}
+        isMobile={layout === NavLayout.MOBILE}
+      >
+        <InteractionStateLayer hasSelectedBackground={isActive} />
+        {children}
+        {showLabel ? label : null}
+      </NavLink>
     </SidebarItem>
   );
 }
@@ -151,20 +157,22 @@ export function SidebarButton({
   const showLabel = layout === NavLayout.MOBILE;
 
   return (
-    <NavButton
-      {...buttonProps}
-      isMobile={layout === NavLayout.MOBILE}
-      aria-label={showLabel ? undefined : label}
-      onClick={(e: React.MouseEvent<HTMLElement>) => {
-        recordPrimaryItemClick(analyticsKey, organization);
-        buttonProps.onClick?.(e);
-        onClick?.(e);
-      }}
-    >
-      <InteractionStateLayer />
-      {children}
-      {showLabel ? label : null}
-    </NavButton>
+    <SidebarItem label={label} showLabel={showLabel}>
+      <NavButton
+        {...buttonProps}
+        isMobile={layout === NavLayout.MOBILE}
+        aria-label={showLabel ? undefined : label}
+        onClick={(e: React.MouseEvent<HTMLElement>) => {
+          recordPrimaryItemClick(analyticsKey, organization);
+          buttonProps.onClick?.(e);
+          onClick?.(e);
+        }}
+      >
+        <InteractionStateLayer />
+        {children}
+        {showLabel ? label : null}
+      </NavButton>
+    </SidebarItem>
   );
 }
 

static/app/components/nav/primary/onboarding.tsx

@@ -73,7 +73,7 @@ function OnboardingItem({
 
   return (
     <GuideAnchor target="onboarding_sidebar" position="right">
-      <SidebarItem>
+      <SidebarItem label={label} showLabel={showLabel}>
         <NavButton
           {...overlayTriggerProps}
           isMobile={layout === NavLayout.MOBILE}

static/app/components/nav/primary/serviceIncidents.tsx

@@ -1,8 +1,8 @@
+import {Fragment} from 'react';
 import styled from '@emotion/styled';
 
 import {
   SidebarButton,
-  SidebarItem,
   SidebarItemUnreadIndicator,
 } from 'sentry/components/nav/primary/components';
 import {
@@ -24,7 +24,7 @@ function ServiceIncidentsButton({incidents}: {incidents: StatuspageIncident[]})
   } = usePrimaryButtonOverlay();
 
   return (
-    <SidebarItem>
+    <Fragment>
       <SidebarButton
         analyticsKey="statusupdate"
         label={t('Service status')}
@@ -42,7 +42,7 @@ function ServiceIncidentsButton({incidents}: {incidents: StatuspageIncident[]})
           ))}
         </PrimaryButtonOverlay>
       )}
-    </SidebarItem>
+    </Fragment>
   );
 }
 export function PrimaryNavigationServiceIncidents() {

static/app/components/nav/primary/whatsNew.tsx

@@ -3,7 +3,6 @@ import {Fragment, useEffect, useMemo} from 'react';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import {
   SidebarButton,
-  SidebarItem,
   SidebarItemUnreadIndicator,
 } from 'sentry/components/nav/primary/components';
 import {
@@ -127,7 +126,7 @@ export function PrimaryNavigationWhatsNew() {
   } = usePrimaryButtonOverlay();
 
   return (
-    <SidebarItem>
+    <Fragment>
       <SidebarButton
         analyticsKey="broadcasts"
         label={t("What's New")}
@@ -143,6 +142,6 @@ export function PrimaryNavigationWhatsNew() {
           <WhatsNewContent unseenPostIds={unseenPostIds} />
         </PrimaryButtonOverlay>
       )}
-    </SidebarItem>
+    </Fragment>
   );
 }

static/gsApp/components/tryBusinessSidebarItem.tsx

@@ -3,7 +3,6 @@ import {Component} from 'react';
 import {prefersStackedNav} from 'sentry/components/nav/prefersStackedNav';
 import {
   SidebarButton,
-  SidebarItem as NavSidebarItem,
   SidebarItemUnreadIndicator,
 } from 'sentry/components/nav/primary/components';
 import SidebarItem from 'sentry/components/sidebar/sidebarItem';
@@ -45,19 +44,17 @@ function TryBusinessNavigationItem({
   const showIsNew = isNew && !tryBusinessSeen;
 
   return (
-    <NavSidebarItem>
-      <SidebarButton
-        label={t('Try Business')}
-        onClick={() => {
-          setTryBusinessSeen(true);
-          onClick();
-        }}
-        analyticsKey="try-business"
-      >
-        <IconBusiness size="md" />
-        {showIsNew && <SidebarItemUnreadIndicator />}
-      </SidebarButton>
-    </NavSidebarItem>
+    <SidebarButton
+      label={t('Try Business')}
+      onClick={() => {
+        setTryBusinessSeen(true);
+        onClick();
+      }}
+      analyticsKey="try-business"
+    >
+      <IconBusiness size="md" />
+      {showIsNew && <SidebarItemUnreadIndicator />}
+    </SidebarButton>
   );
 }