Popover with no children

[jeanbza]

This does not work:

<Popover isOpen={this.state['popoverVisible']} body='hello from popover!' />

This does:

<Popover isOpen={this.state['popoverVisible']} body='hello from popover!'><div></div></Popover>

It'd be nice if both worked =)

[jasonkuhrt]

Hey @jadekler

It seems that you want to be able to create the popover without a target? If so, wouldn't that just basically be a modal? Let me know more about your intention, I'd love to understand.

[anissaSanadtech]

children shouldn't be required in case we want to appendTarget, btw target is the same thing as children which is confusing at first and setting appendTarget is overridden by target, how can it be solved?

[jasonkuhrt]

Hey @anissaSanadtech I'm a bit confused. appendTarget is about where the portal will be mounted in the DOM. Sometimes controlling this is desirable. children is the visual target of the popover, the thing the popover is going to "point" at. They each serve very different purposes. Am I missing something?

[kaloudis]

@jasonkuhrt My issue is that sometimes I can't use children as the object I want to tie the tooltip - it doesn't render - however using it like in @jadekler example is ideal in my app. I just wish it would allow for the self-closing tags. I think https://github.com/littlebits/react-popover/pull/178 is all that is needed for this change.

[jasonkuhrt]

@kaloudis What do you expect popover to do given:

<Popover isOpen={true} body='foobar' />

Where is it going to render? What will its x/y coordinates be? Can you show me a code example with a bit more context?

[kaloudis]

@jasonkuhrt in my case it renders wherever I place it in the app - so long as isOpen is set to true. I realize different people have their apps set up differently - in many cases they're required to set a child component to latch on to but as in my case and in @jadekler's, it's not required.

Currently my code looks sorta like this:

<div onClick={() => this.setState({open: true})}>
   <Popover
       isOpen={this.state.open}
       className="popover"
       preferPlace="below"
       onOuterAction={() => this.setState({open: false})}
       tipSize=".01" // disable tip
       body={
          <HuntHistory close={() => this.setState({openHuntHistory: false}) } />
       }
     ><div></div></Popover>
</div>