Popovers

Add small overlay content, like those found in iOS, to any element for housing secondary information.

const Popover = require('gitbook-styleguide/lib/Popover');

Example

Hello
Inner body of the popover.
<Popover>
<Popover.Heading title="Hello" />
<Popover.Body>
Inner body of the popover.
</Popover.Body>
<Popover.Controls>
<Popover.Control active onClick={event => alert('Hello')}>
Say Hello
</Popover.Control>
<Popover.Control onClick={event => alert('World')}>
Say World
</Popover.Control>
</Popover.Controls>
</Popover>

With an input

Edit title
<Popover>
<Popover.Heading>
<Popover.Title>
<Icon id="pencil" /> Edit title
</Popover.Title>
</Popover.Heading>
<Popover.Body>
<Input placeholder="Some title" />
</Popover.Body>
</Popover>

With button and state

<Popover.Container>
<Button onClick={event => this.setState({ open: !this.state.open })}>
Toggle Popover
</Button>
{this.state.open? (<Popover>
<Popover.Heading title="Hello" />
<Popover.Body>
Inner body of the popover.
</Popover.Body>
</Popover>) : null}
</Popover.Container>

With custom positioning

<div>{
[
'top',
'top-right',
'right',
'bottom-right',
'bottom',
'bottom-left',
'left',
'top-left'
].map(pos =>
<Popover.Container key={pos}
onMouseEnter={() => this.setState({ [pos]: true })}
onMouseLeave={() => this.setState({ [pos]: false })}>
<Button >
{pos}
</Button>
{ this.state[pos] ?
<Popover position={pos}>
<Popover.Body>{pos}</Popover.Body>
</Popover>
: null }
</Popover.Container>
)
}</div>