brandv1.0
Utilities
Data Display
Data Entry
Feedback
Tables
Charts
Maps
Navigation
BEHAVIORAL
Layout

Explore Templates

Popover

Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.

Basic examples

Four directions are available: Top, Right, Bottom and Left. For adding popovers read official documentation of bootstrap.

Preview
Jsx
Props
import React from 'react';
import { Button, OverlayTrigger, Popover } from 'react-bootstrap';

const BasicPopover = () => {
    // popover layout-1
    const popover1 = (
        <Popover id="popover-basic">
            <Popover.Header as="h3">Popover right</Popover.Header>
            <Popover.Body>
                Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
            </Popover.Body>
        </Popover>
    );
    // popover layout-2
    const popover2 = (
        <Popover id="popover-basic">
            <Popover.Body>
                Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
            </Popover.Body>
        </Popover>
    );
  return (
    <>
        <OverlayTrigger trigger="click" placement="top" overlay={popover1}>
            <Button variant="secondary">Click to Toggle</Button>
        </OverlayTrigger>

        <OverlayTrigger trigger="click" placement="top" overlay={popover2}>
            <Button variant='secondary' >Popover on top</Button>
        </OverlayTrigger>

        <OverlayTrigger trigger="click" placement="right" overlay={popover2}>
            <Button variant='secondary' >Popover on right</Button>
        </OverlayTrigger>

        <OverlayTrigger trigger="click" placement="bottom" overlay={popover2}>
            <Button variant='secondary' >Popover on bottom</Button>
        </OverlayTrigger>

        <OverlayTrigger trigger="click" placement="left" overlay={popover2}>
            <Button variant='secondary' >Popover on left</Button>
        </OverlayTrigger>
    </>
  );
}

export default BasicPopover;
propsValuesDefaultDescription
idrequiredstringAn html id attribute, necessary for accessibility
placement'auto-start' | 'auto' | 'auto-end' | 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-end' | 'bottom' | 'bottom-start' | 'left-end' | 'left' | 'left-start'right

Sets the direction the Popover is positioned towards.

This is generally provided by the Overlay component positioning the popover

popperobject
showboolean
bsPrefixstringpopoverChange the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Disabled elements

Elements with the disabled attribute aren’t interactive, meaning users cannot hover or click them to trigger a popover (or tooltip). As a workaround, you’ll want to trigger the overlay from a wrapper <div> or <span> and override the pointer-events on the disabled element.

Preview
Jsx
import React from 'react';
import { Button, OverlayTrigger, Popover } from 'react-bootstrap';

const DisabledPopover = () => {
    // popover layout
    const popover = (
        <Popover id="disabled-popover">
            <Popover.Body>
                Disabled popover
            </Popover.Body>
        </Popover>
    );
  return (
    <OverlayTrigger placement="right" overlay={popover}>
        <span className="d-inline-block">
            <Button disabled style={{ pointerEvents: 'none' }}>
                Disabled button
            </Button>
        </span>
    </OverlayTrigger>
  );
}

export default DisabledPopover;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Dismiss on next clicks

Use the focus trigger to dismiss popovers on the user's next click of a different element than the toggle element.

Preview
Jsx
import React from 'react';
import { Button, OverlayTrigger, Popover } from 'react-bootstrap';

const DismissOnNextClick = () => {
    // popover layout
    const popover = (
        <Popover id="popover-onClick">
            <Popover.Header as="h3">Dismissible popover</Popover.Header>
            <Popover.Body>
                And here's some amazing content. It's very engaging. Right?
            </Popover.Body>
        </Popover>
    );
  return (
    <OverlayTrigger trigger="focus" placement="top" overlay={popover}>
        <Button variant="danger" >Dismissible popover</Button>
    </OverlayTrigger>
  );
}

export default DismissOnNextClick;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Jump to