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

const Popover = require('gitbook-styleguide/lib/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>

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

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

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