Skip to main content

Tooltip

Tooltips are lightweight popovers that appear when the user hovers over an element or clicks on it. By default the Tooltip will render as the "dark" variant but will respect the data-bs-theme attribute to change the color scheme. This component combines React Bootstrap OverlayTrigger and Tooltip.

See React Bootstrap/Overlays for full documentation and props.

Result
Loading...
Live Editor
<Tooltip title="Hovering over the button will show this tooltip.">
	<Button>Button</Button>
</Tooltip>

Variants​

When the variant prop is used it will supersede the data-bs-theme attribute.

Result
Loading...
Live Editor
<div
	style={{
		display: 'grid',
		gridTemplateColumns: 'repeat(auto-fit, minmax(100px, 1fr))',
		gridGap: '2rem',
	}}
	data-testid="pw-tooltip"
>
	<Tooltip
		title="This is an example tooltip. When the lines are long they will wrap."
		placement="top"
		variant="dark"
	>
		<Button variant="dark">Dark (default)</Button>
	</Tooltip>
	<Tooltip
		title="This is an example tooltip. When the lines are long they will wrap."
		placement="top"
		variant="light"
	>
		<Button variant="light">Light</Button>
	</Tooltip>
</div>

Placement​

The placement prop can be used to change the position of the Tooltip relative to its trigger element.

Basic placements​

Basic placements will position the arrow centered on the Tooltip.

Result
Loading...
Live Editor
<div
	style={{
		display: 'grid',
		gridTemplateColumns: 'repeat(auto-fit, minmax(100px, 1fr))',
		gridGap: '2rem',
	}}
>
	{['top', 'right', 'bottom', 'left'].map((placement) => (
		<Tooltip key={placement} title={`Tooltip on ${placement}`} placement={placement}>
			<Button>{placement}</Button>
		</Tooltip>
	))}
</div>

Variation placements​

Variation placements will position the arrow offset from the center of the Tooltip.

Result
Loading...
Live Editor
<div
	style={{
		display: 'grid',
		gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
		gridGap: '2rem',
	}}
>
	{[
		'auto',
		'auto-start',
		'auto-end',
		'top-start',
		'top-end',
		'bottom-start',
		'bottom-end',
		'right-start',
		'right-end',
		'left-start',
		'left-end',
	].map((placement) => (
		<Tooltip key={placement} title={`Tooltip on ${placement}`} placement={placement}>
			<Button>{placement}</Button>
		</Tooltip>
	))}
</div>

Portal control​

With the container prop you can provide the DOM element you want the Tooltip to be appended to.

Result
Loading...
Live Editor
<>
	<Tooltip
		id="demo-tooltip"
		title="This is an example tooltip. When the lines are long they will wrap."
		placement="top"
		container={() => document.getElementById('tooltip-container')}
	>
		<Button>Button with tooltip</Button>
	</Tooltip>
	{/* tooltip will be appended to this div */}
	<div id="tooltip-container" />
</>

Props​