Skip to content

Popup is not preventing overflow when position is set. #4511

Open
@c3-danogaram

Description

@c3-danogaram

Bug Report

Steps

Configure a tooltip that uses preferred position.
Trigger element should be close to the screen edges.

<Container> <Popup content="This is a laaaaaaarge text" trigger={<Button content="Button" />} on={["click", "hover", "focus"]} position="bottom center" /> </Container>

Expected Result

position value is the preferred position but it should fallback to a position that allows tooltip to be entirely visible in the screen, preventing overflow.

Image

Actual Result

Popup content is cut off on the screen. Overflow prevention is not working and only uses the preferred position

Image

Version

2.1.5

Testcase

https://codesandbox.io/p/sandbox/semantic-ui-react-forked-dqj4g3?file=%2Findex.js%3A3%2C28&workspaceId=ws_N8ra7LbEMp3foJvHk72Qm
[Fork, update, and replace this pen to show the bug]:
https://codesandbox.io/p/sandbox/semantic-ui-react-forked-dqj4g3?file=%2Findex.js%3A3%2C28&workspaceId=ws_N8ra7LbEMp3foJvHk72QmM

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions