fix(tooltip): rename arrow-offset-horizontal to arrow-offset-x CSS variable to fix transformOrigin (ant-design#56887)

The variable name was inconsistent and caused transformOrigin to not properly reference
the arrow position for animations.

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: zombieJ

components/popover/style/index.ts

@@ -108,7 +108,7 @@ const genBaseStyle: GenerateStyle<PopoverToken> = (token) => {
         userSelect: 'text',
 
         // When use `autoArrow`, origin will follow the arrow position
-        [varName('valid-offset-x')]: varRef('arrow-offset-horizontal', 'var(--arrow-x)'),
+        [varName('valid-offset-x')]: varRef('arrow-offset-x', 'var(--arrow-x)'),
         transformOrigin: [
           varRef('valid-offset-x', FALL_BACK_ORIGIN),
           `var(--arrow-y, ${FALL_BACK_ORIGIN})`,

components/style/placementArrow.ts

@@ -106,7 +106,7 @@ const getArrowStyle = <
         },
 
         '&-placement-topLeft': {
-          [varName('arrow-offset-horizontal')]: arrowOffsetHorizontal,
+          [varName('arrow-offset-x')]: arrowOffsetHorizontal,
 
           [`> ${componentCls}-arrow`]: {
             left: {
@@ -117,7 +117,7 @@ const getArrowStyle = <
         },
 
         '&-placement-topRight': {
-          [varName('arrow-offset-horizontal')]: `calc(100% - ${unit(arrowOffsetHorizontal)})`,
+          [varName('arrow-offset-x')]: `calc(100% - ${unit(arrowOffsetHorizontal)})`,
 
           [`> ${componentCls}-arrow`]: {
             right: {
@@ -148,7 +148,7 @@ const getArrowStyle = <
         },
 
         '&-placement-bottomLeft': {
-          [varName('arrow-offset-horizontal')]: arrowOffsetHorizontal,
+          [varName('arrow-offset-x')]: arrowOffsetHorizontal,
 
           [`> ${componentCls}-arrow`]: {
             left: {
@@ -159,7 +159,7 @@ const getArrowStyle = <
         },
 
         '&-placement-bottomRight': {
-          [varName('arrow-offset-horizontal')]: `calc(100% - ${unit(arrowOffsetHorizontal)})`,
+          [varName('arrow-offset-x')]: `calc(100% - ${unit(arrowOffsetHorizontal)})`,
 
           [`> ${componentCls}-arrow`]: {
             right: {

components/tooltip/style/index.ts

@@ -83,7 +83,7 @@ const genTooltipStyle: GenerateStyle<TooltipToken> = (token) => {
 
   const sharedTransformOrigin: CSSObject = {
     // When use `autoArrow`, origin will follow the arrow position
-    [varName('valid-offset-x')]: varRef('arrow-offset-horizontal', 'var(--arrow-x)'),
+    [varName('valid-offset-x')]: varRef('arrow-offset-x', 'var(--arrow-x)'),
     transformOrigin: [
       varRef('valid-offset-x', FALL_BACK_ORIGIN),
       `var(--arrow-y, ${FALL_BACK_ORIGIN})`,