fix: Use visible first (#42394)

components/_util/placements.ts

@@ -13,6 +13,7 @@ export interface PlacementsConfig {
   autoAdjustOverflow?: boolean | AdjustOverflow;
   offset: number;
   borderRadius: number;
+  visibleFirst?: boolean;
 }
 
 export function getOverflowOptions(
@@ -141,7 +142,8 @@ const DisableAutoArrowList: Set<keyof BuildInPlacements> = new Set([
 ]);
 
 export default function getPlacements(config: PlacementsConfig) {
-  const { arrowWidth, autoAdjustOverflow, arrowPointAtCenter, offset, borderRadius } = config;
+  const { arrowWidth, autoAdjustOverflow, arrowPointAtCenter, offset, borderRadius, visibleFirst } =
+    config;
   const halfArrowWidth = arrowWidth / 2;
 
   const placementMap: BuildInPlacements = {};
@@ -220,6 +222,11 @@ export default function getPlacements(config: PlacementsConfig) {
 
     // Overflow
     placementInfo.overflow = getOverflowOptions(key, arrowOffset, arrowWidth, autoAdjustOverflow);
+
+    // VisibleFirst
+    if (visibleFirst) {
+      placementInfo.htmlRegion = 'visibleFirst';
+    }
   });
 
   return placementMap;

components/tooltip/index.tsx

@@ -291,6 +291,7 @@ const Tooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref) => {
         arrowWidth: mergedShowArrow ? token.sizePopupArrow : 0,
         borderRadius: token.borderRadius,
         offset: token.marginXXS,
+        visibleFirst: true,
       })
     );
   }, [arrowPointAtCenter, arrow, builtinPlacements, token]);

package.json

@@ -116,7 +116,7 @@
     "@rc-component/color-picker": "~1.0.0",
     "@rc-component/mutate-observer": "^1.0.0",
     "@rc-component/tour": "~1.8.0",
-    "@rc-component/trigger": "^1.12.0",
+    "@rc-component/trigger": "^1.13.0",
     "classnames": "^2.2.6",
     "copy-to-clipboard": "^3.2.0",
     "dayjs": "^1.11.1",