Reactstrap Popovers
Bootstrap popovers are a small overlay of content that is used to demonstrate secondary information of any component when it is clicked by a user. For example, you can think about those from iOS’s devices. Now keep reading some examples to see how Bootstrap popovers work.
Example
import React from "react";
// reactstrap components
import { Button, PopoverBody, UncontrolledPopover } from "reactstrap";
function Example() {
return (
<>
<Button
className=" mt-2"
color="default"
id="popover644119284"
type="button"
>
Popover on top
</Button>
<UncontrolledPopover placement="top" target="popover644119284">
<PopoverBody>
This is a very beautiful popover, show some love.
</PopoverBody>
</UncontrolledPopover>
<Button
className=" mt-2"
color="default"
id="popover281198417"
type="button"
>
Popover on right
</Button>
<UncontrolledPopover placement="right" target="popover281198417">
<PopoverBody>
This is a very beautiful popover, show some love.
</PopoverBody>
</UncontrolledPopover>
<Button
className=" mt-2"
color="default"
id="popover73472958"
type="button"
>
Popover on bottom
</Button>
<UncontrolledPopover placement="bottom" target="popover73472958">
<PopoverBody>
Vivamussagittis lacus vel augue laoreet rutrum faucibus.
</PopoverBody>
</UncontrolledPopover>
<Button
className=" mt-2"
color="default"
id="popover997738441"
type="button"
>
Popover on left
</Button>
<UncontrolledPopover placement="left" target="popover997738441">
<PopoverBody>
This is a very beautiful popover, show some love.
</PopoverBody>
</UncontrolledPopover>
</>
);
}
export default Example;
Variations
import React from "react";
// reactstrap components
import { Button, PopoverBody, UncontrolledPopover } from "reactstrap";
function Example() {
return (
<>
<Button color="default" id="popover-default" type="button">
Default popover
</Button>
<UncontrolledPopover
popperClassName="popover-default"
placement="top"
target="popover-default"
>
<PopoverBody>
This is a very beautiful popover, show some love.
</PopoverBody>
</UncontrolledPopover>
<Button color="primary" id="popover-primary" type="button">
Primary popover
</Button>
<UncontrolledPopover
popperClassName="popover-primary"
placement="top"
target="popover-primary"
>
<PopoverBody>
This is a very beautiful popover, show some love.
</PopoverBody>
</UncontrolledPopover>
<Button color="secondary" id="popover-secondary" type="button">
Secondary popover
</Button>
<UncontrolledPopover
popperClassName="popover-secondary"
placement="top"
target="popover-secondary"
>
<PopoverBody>
This is a very beautiful popover, show some love.
</PopoverBody>
</UncontrolledPopover>
<Button color="info" id="popover-info" type="button">
Info popover
</Button>
<UncontrolledPopover
popperClassName="popover-info"
placement="top"
target="popover-info"
>
<PopoverBody>
This is a very beautiful popover, show some love.
</PopoverBody>
</UncontrolledPopover>
<Button color="success" id="popover-success" type="button">
Success popover
</Button>
<UncontrolledPopover
popperClassName="popover-success"
placement="top"
target="popover-success"
>
<PopoverBody>
This is a very beautiful popover, show some love.
</PopoverBody>
</UncontrolledPopover>
<Button color="danger" id="popover-danger" type="button">
Danger popover
</Button>
<UncontrolledPopover
popperClassName="popover-danger"
placement="top"
target="popover-danger"
>
<PopoverBody>
This is a very beautiful popover, show some love.
</PopoverBody>
</UncontrolledPopover>
<Button color="warning" id="popover-warning" type="button">
Warning popover
</Button>
<UncontrolledPopover
popperClassName="popover-warning"
placement="top"
target="popover-warning"
>
<PopoverBody>
This is a very beautiful popover, show some love.
</PopoverBody>
</UncontrolledPopover>
</>
);
}
export default Example;
Props
If you want to see more examples and properties please check the official Reactstrap Documentation.