Merge branch 'main' of https://github.com/DouyinFE/semi-design into release

packages/semi-foundation/tooltip/foundation.ts

@@ -387,6 +387,8 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
 
     calcPosStyle(props: {triggerRect: DOMRect; wrapperRect: DOMRect; containerRect: PopupContainerDOMRect; position?: Position; spacing?: number; isOverFlow?: [boolean, boolean]}) {
         const { spacing, isOverFlow } = props;
+        const { innerWidth } = window;
+        
         const triggerRect = (isEmpty(props.triggerRect) ? props.triggerRect : this._adapter.getTriggerBounding()) || { ...defaultRect as any };
         const containerRect = (isEmpty(props.containerRect) ? props.containerRect : this._adapter.getPopupContainerRect()) || {
             ...defaultRect,
@@ -427,7 +429,8 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
 
         const isTriggerNearLeft = middleX - containerRect.left < containerRect.right - middleX;
         const isTriggerNearTop = middleY - containerRect.top < containerRect.bottom - middleY;
-
+        
+        const isWrapperWidthOverflow = wrapperRect.width > innerWidth;
 
         switch (position) {
             case 'top':
@@ -441,7 +444,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
             case 'topLeft':
                 // left = pointAtCenter ? middleX - offsetXWithArrow : triggerRect.left;
                 // top = triggerRect.top - SPACING;
-                left = isWidthOverFlow ? containerRect.left : (pointAtCenter ? middleX - offsetXWithArrow : triggerRect.left);
+                left = isWidthOverFlow ? (isWrapperWidthOverflow ? containerRect.left : containerRect.right - wrapperRect.width ) : (pointAtCenter ? middleX - offsetXWithArrow : triggerRect.left);
                 top = isHeightOverFlow ? containerRect.bottom + offsetHeight : triggerRect.top - SPACING;
                 translateY = -1;
                 break;
@@ -487,7 +490,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
             case 'bottomLeft':
                 // left = pointAtCenter ? middleX - offsetXWithArrow : triggerRect.left;
                 // top = triggerRect.bottom + SPACING;
-                left = isWidthOverFlow ? containerRect.left : (pointAtCenter ? middleX - offsetXWithArrow : triggerRect.left);
+                left = isWidthOverFlow ? (isWrapperWidthOverflow ? containerRect.left : containerRect.right - wrapperRect.width ) : (pointAtCenter ? middleX - offsetXWithArrow : triggerRect.left);
                 top = isHeightOverFlow ? containerRect.top + offsetYWithArrow - SPACING : triggerRect.top + triggerRect.height + SPACING;
                 break;
             case 'bottomRight':

packages/semi-ui/tooltip/_story/tooltip.stories.jsx

@@ -1403,6 +1403,41 @@ export const OcclusionDemo = () => {
   );
 }
 
+export const Fix1449 = () =>{
+  return <div style={{ width: "100%", overflow: "hidden" }}>
+      <div style={{ position: "relative", height: 200 }}>
+        <Select
+          placeholder=""
+          style={{ width: 400, left: 500, position: "absolute" }}
+          filter
+          position='bottomLeft'
+          autoAdjustOverflow
+        >
+          <Select.Option value="abc">抖音</Select.Option>
+          <Select.Option value="ulikecam">轻颜相机</Select.Option>
+          <Select.Option value="jianying" disabled>
+            剪映
+          </Select.Option>
+          <Select.Option value="xigua">西瓜视频</Select.Option>
+        </Select>
+      </div>
+      <div style={{ position: "relative", height: 100 }}>
+      <Tooltip 
+        visible
+        position='topLeft'
+        content={
+          <div >
+            贴右显示
+          </div>
+        }>
+        <Button style={{ width: 200, left: 700, top: 50, position: "absolute" }}>
+          缩小视口以遮挡我的右侧
+        </Button>
+      </Tooltip>
+    </div>
+    </div>
+}
+
 // right -> other
 export const AutoRight2LeftDemo = () => <Right2Left />;
 AutoRight2LeftDemo.storyName = `✅ auto : right -> left`;