ref(tooltip): Rename popperStyle -> overlayStyle (#34687)

static/app/components/createAlertButton.tsx

@@ -426,7 +426,7 @@ const CreateAlertButton = withRouter(
         tooltipProps={{
           isHoverable: true,
           position: 'top',
-          popperStyle: {
+          overlayStyle: {
             maxWidth: '270px',
           },
         }}

static/app/components/questionTooltip.tsx

@@ -33,7 +33,7 @@ type QuestionProps = {
   Partial<
     Pick<
       React.ComponentProps<typeof Tooltip>,
-      'containerDisplayMode' | 'isHoverable' | 'popperStyle'
+      'containerDisplayMode' | 'isHoverable' | 'overlayStyle'
     >
   >;
 

static/app/components/searchSyntax/renderer.tsx

@@ -130,7 +130,7 @@ const FilterToken = ({
     <Tooltip
       disabled={!showTooltip}
       title={filter.invalid?.reason}
-      popperStyle={{maxWidth: '350px'}}
+      overlayStyle={{maxWidth: '350px'}}
       forceVisible
       skipWrapper
     >

static/app/components/tooltip.tsx

@@ -85,7 +85,7 @@ export interface InternalTooltipProps {
   /**
    * Additional style rules for the tooltip content.
    */
-  popperStyle?: React.CSSProperties | SerializedStyles;
+  overlayStyle?: React.CSSProperties | SerializedStyles;
 
   /**
    * Position for the tooltip.
@@ -148,7 +148,7 @@ export function DO_NOT_USE_TOOLTIP({
   delay,
   forceVisible,
   isHoverable,
-  popperStyle,
+  overlayStyle,
   showUnderline,
   underlineColor,
   showOnlyOnOverflow,
@@ -291,7 +291,7 @@ export function DO_NOT_USE_TOOLTIP({
                     id={tooltipId}
                     data-placement={placement}
                     style={computeOriginFromArrow(position, arrowProps)}
-                    popperStyle={popperStyle}
+                    overlayStyle={overlayStyle}
                     onMouseEnter={isHoverable ? handleMouseEnter : undefined}
                     onMouseLeave={isHoverable ? handleMouseLeave : undefined}
                     {...TOOLTIP_ANIMATION}
@@ -335,7 +335,7 @@ const TooltipContent = styled(motion.div, {
   shouldForwardProp: (prop: string) =>
     typeof prop === 'string' && (animationProps.includes(prop) || isPropValid(prop)),
 })<{
-  popperStyle: InternalTooltipProps['popperStyle'];
+  overlayStyle: InternalTooltipProps['overlayStyle'];
 }>`
   will-change: transform, opacity;
   position: relative;
@@ -352,7 +352,7 @@ const TooltipContent = styled(motion.div, {
 
   margin: 6px;
   text-align: center;
-  ${p => p.popperStyle as any};
+  ${p => p.overlayStyle as any};
 `;
 
 const TooltipArrow = styled('span')`

static/app/components/version.tsx

@@ -122,8 +122,9 @@ const Version = ({
     </TooltipContent>
   );
 
-  const getPopperStyles = () => {
-    // if the version name is not a hash (sha1 or sha265) and we are not on mobile, allow tooltip to be as wide as 500px
+  const getOverlayStyle = () => {
+    // if the version name is not a hash (sha1 or sha265) and we are not on
+    // mobile, allow tooltip to be as wide as 500px
     if (/(^[a-f0-9]{40}$)|(^[a-f0-9]{64}$)/.test(version)) {
       return undefined;
     }
@@ -141,7 +142,7 @@ const Version = ({
       disabled={!tooltipRawVersion}
       isHoverable
       containerDisplayMode={truncate ? 'block' : 'inline-block'}
-      popperStyle={getPopperStyles()}
+      overlayStyle={getOverlayStyle()}
     >
       {renderVersion()}
     </Tooltip>

static/app/utils/dashboards/issueFieldRenderers.tsx

@@ -166,7 +166,7 @@ const issuesCountRenderer = (
       <Tooltip
         isHoverable
         skipWrapper
-        popperStyle={{padding: 0}}
+        overlayStyle={{padding: 0}}
         title={
           <div>
             {filteredCount ? (

static/app/views/settings/project/filtersAndSampling/modal/transactionRuleModal.tsx

@@ -147,7 +147,7 @@ function TransactionRuleModal({rule, errorRules, transactionRules, ...props}: Pr
           <Tooltip
             title={t('This field can only be edited if there are no match conditions')}
             disabled={!isTracingDisabled}
-            popperStyle={css`
+            overlayStyle={css`
               @media (min-width: ${theme.breakpoints[0]}) {
                 max-width: 370px;
               }