Skip to main content

Popover

See React Bootstrap/Popover for full documentation and props.

A PopoverTrigger or Overlay component should be used to correctly position this component.

Result
Loading...
Live Editor
function Example() {
	const [show, setShow] = React.useState(false);

	return (
		<div data-testid="pw-popover">
			<PopoverTrigger
				show={show}
				onToggle={setShow}
				overlay={
					<Popover>
						<Popover.Header>Header</Popover.Header>
						<Popover.Body>Body</Popover.Body>
						<Popover.Footer>
							<Button size="sm" onClick={() => setShow(false)} variant="outline-secondary">
								Cancel
							</Button>
							<Button size="sm">Submit</Button>
						</Popover.Footer>
					</Popover>
				}
			>
				<Button>Trigger</Button>
			</PopoverTrigger>
		</div>
	);
}

Without footers​

Result
Loading...
Live Editor
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)' }}>
	{['top', 'right', 'bottom', 'left'].map((placement) => (
		<PopoverTrigger
			placement={placement}
			key={placement}
			overlay={
				<Popover>
					<Popover.Header>Header</Popover.Header>
					<Popover.Body>Body</Popover.Body>
				</Popover>
			}
		>
			<Button size="sm">Trigger {placement}</Button>
		</PopoverTrigger>
	))}
</div>
Result
Loading...
Live Editor
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
	<PopoverTrigger
		placement="bottom"
		overlay={
			<Popover>
				<Popover.Header showCloseBtn={false}>
					<div className="me-2">
						<Popover.Icon>
							<span className="icon-face-smile" />
						</Popover.Icon>
					</div>
					<h5 className="mb-0 mt-1">This is a Popover</h5>
				</Popover.Header>
				<Popover.Body>Body</Popover.Body>
				<Popover.Footer>
					<Button size="sm" variant="outline-secondary">
						Cancel
					</Button>
					<Button size="sm">Submit</Button>
				</Popover.Footer>
			</Popover>
		}
	>
		<Button>With Icon</Button>
	</PopoverTrigger>
	<PopoverTrigger
		placement="bottom"
		overlay={
			<Popover>
				<Popover.Header>
					<h5 className="mb-0 mt-1">This is a Popover</h5>
				</Popover.Header>
				<Popover.Body>Body</Popover.Body>
				<Popover.Footer>
					<Button size="sm" variant="outline-secondary">
						Cancel
					</Button>
					<Button size="sm">Submit</Button>
				</Popover.Footer>
			</Popover>
		}
	>
		<Button>With Close Button</Button>
	</PopoverTrigger>
	<PopoverTrigger
		placement="bottom"
		overlay={
			<Popover>
				<Popover.Header>
					<div className="me-2">
						<Popover.Icon>
							<span className="icon-face-smile" />
						</Popover.Icon>
					</div>
					<h5 className="mb-0 mt-1">This is a Popover</h5>
				</Popover.Header>
				<Popover.Body>Body</Popover.Body>
				<Popover.Footer>
					<Button size="sm" variant="outline-secondary">
						Cancel
					</Button>
					<Button size="sm">Submit</Button>
				</Popover.Footer>
			</Popover>
		}
	>
		<Button>With Icon and Close Button</Button>
	</PopoverTrigger>
</div>

Fullscreen and mobile breakpoints​

Result
Loading...
Live Editor
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)' }}>
	{[true, false, 'sm-down', 'md-down', 'lg-down', 'xl-down', 'xxl-down'].map((fullscreen) => (
		<PopoverTrigger
			key={fullscreen}
			overlay={
				<Popover fullscreen={fullscreen}>
					<Popover.Header>Header</Popover.Header>
					<Popover.Body>Body</Popover.Body>
					<Popover.Footer>
						<Button size="sm" variant="outline-secondary">
							Cancel
						</Button>
						<Button size="sm">Submit</Button>
					</Popover.Footer>
				</Popover>
			}
		>
			<Button>Fullscreen = {fullscreen}</Button>
		</PopoverTrigger>
	))}
</div>

Props​

Popover​

PopoverTrigger​