Semantic UI React Popup(s) Not Appearing

Question

See title.

Code is literally

<Popup
trigger={<li id="close"><a>Close</a></li>}
content="Click to close"
basic
/>

And yeah when the item in question is hovered, or clicked, the popup doesn't appear. When I set open={true} it does, not attached to the component (as expected). Has anyone encountered this issue and could they advise possible solutions?

Answer 1

I just rewrote your code and it works! However, in case you wanna control the popup with an open attribute, you should create a state for it and handle popup opening with an onMouseOver function.

For example: you define a state named isPopupOpen and set it to false by default.

this.state={
isPopupOpen : false
}

then you handle the situation with two methods:

handleMouseOver = () => this.setState({ isPopupOpen: true })

handleMouseOut = () => this.setState({ isPopupOpen: false })

and finally write the popup this way:

                <Popup 
                trigger={
                    <li 
                    id='close'
                    onMouseOver={this.handleMouseOver}
                    onMouseOut={this.handleMouseOut}
                    >
                        <a>Close</a> 
                    </li>
                }
                content={'click to close'}
                basic
                open={this.state.isPopupOpen}
            />

Answer 2

You would need position property

<Popup
trigger={<li id="close"><a>Close</a></li>}
content="Click to close"
basic
position="top left"
/>