CODEWITHSUNDEEP
reactjssemantic-ui
Alister
Alister

Reputation: 463

Semantic UI React Popup(s) Not Appearing

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?

Upvotes: 1

Views: 2814

Answers (4)

aggregate1166877
aggregate1166877

Reputation: 3150

If you're using position: fixed or position: relative, ensure your component's z-index is under 1900. Or, manually set your tooltip's z-index higher.

The popup has a z-index of 1900. In my case I had a window floating top right with a z-index of 10000. The popup did render, but wasn't visible because it was behind my floating window. I found this out by inspecting the page (I got the idea while reading Alister's answer).

Upvotes: 0

sushmitha reddy
sushmitha reddy

Reputation: 131

You would need position property

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

Upvotes: 1

Alister
Alister

Reputation: 463

CSS code applied to HTML was making it position: relative which affect where Popups appeared - they were appearing, just at the wrong position. Unfortunately removing this code completely ruins our sticky footer.

Hopefully anyone else who experiences the same problem will see this and realise their mistake.

Upvotes: 2

Farshad J
Farshad J

Reputation: 121

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}
            />

Upvotes: 1

Related Questions