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>