Popover

Popovers are powerful elements similar to tooltips and powered by Popper.js that can be applies to any interactive element.

Basic Example

Popovers can be created using the Popover component.

import React from "react";
import { Button, Popover, PopoverBody, PopoverHeader } from "shards-react";

export default class PopoverExample extends React.Component {
  constructor(props) {
    super(props);
    this.toggle = this.toggle.bind(this);
    this.state = {
      open: false
    };
  }

  toggle() {
    this.setState({
      open: !this.state.open
    });
  }

  render() {
    return (
      <div>
        <Button id="popover-1" onClick={this.toggle}>
          Toggle
        </Button>
        <Popover
          placement="bottom"
          open={this.state.open}
          toggle={this.toggle}
          target="#popover-1"
        >
          <PopoverHeader>Title here</PopoverHeader>
          <PopoverBody>
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
            terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
            labore wes anderson cred nesciunt sapiente ea proident.
          </PopoverBody>
        </Popover>
      </div>
    );
  }
}

Placement

Using the placement prop you can adjust where your popover will be displayed.

import React from "react";
import { Button, Popover, PopoverBody, PopoverHeader } from "shards-react";

export default class PopoverPlacementExample extends React.Component {
  constructor(props) {
    super(props);
    this.toggle = this.toggle.bind(this);
    this.state = { open: false };
  }

  toggle() {
    this.setState({ open: !this.state.open });
  }

  render() {
    return (
      <div>
        <Button id="popover-2" onClick={this.toggle}>
          Toggle
        </Button>
        <Popover
          placement="left"
          open={this.state.open}
          toggle={this.toggle}
          target="#popover-2"
        >
          <PopoverHeader>Title here</PopoverHeader>
          <PopoverBody>
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
            terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
            labore wes anderson cred nesciunt sapiente ea proident.
          </PopoverBody>
        </Popover>
      </div>
    );
  }
}

Props

The following props are available for the Popover component.

Prop	Description	Type	Default	Required
className	The class name.	`String`	-	No
target	The target element.	`Custom`	-	No
container	The popover container.	`Custom`	-	No
modifiers	Popper modifiers object.	`Object`	-	No
open	Whether the popover is open, or not.	`Bool`	`false`	No
innerClassName	The inner class name.	`String`	-	No
disabled	Whether the popover is disabled, or not.	`Bool`	-	No
noArrow	Whether to hide the arrow, or not.	`Bool`	`false`	No
arrowClassName	The arrow class name.	`String`	-	No
boundariesElement	The boundaries element for the Popover instance.	`StringElement`	-	No
placement	The popover placement.	`String`	`"top"`	No
placementPrefix	The placement prefix.	`String`	`"bs-popover"`	No
offset	The popover offset.	`StringNumber`	-	No
toggle	The toggle function.	`Func`	`function() {}`	No
delay	The show/hide delay in ms.	`NumberShape`	`{ show: 0, hide: 0 }`	No

Subcomponents

The following subcomponents are available for the Popover component.

<PopoverBody/>

Prop	Description	Type	Default	Required
className	The class name.	`String`	-	No
tag	The component's tag type.	`FuncString`	`"div"`	No

<PopoverHeader/>

Prop	Description	Type	Default	Required
className	The class name.	`String`	-	No
tag	The tag type.	`FuncString`	`"h3"`	No