Popover

Displays floating content anchored to the trigger using Anchor Positioning and the Popover API.

In HTML, set popovertarget, popover, and id manually. In React, also set popoverTarget and id manually.

Usage


<div data-unitone-layout="popover">
	<div data-unitone-layout="popover-trigger">
		<button popovertarget="popover-example-content">Open popover</button>
	</div>
	<div
		id="popover-example-content"
		data-unitone-layout="popover-content"
		popover
	>
		<div data-unitone-layout="popover-dialog">
			The content of the Popover.
		</div>
	</div>
</div>

Props

`Popover`

HTML -gap:{variation} / JSX gap={variation}

Controls the distance between the trigger and the content.

Can be set from -3 to 7. For variations 2 and above, clamp is used to adjust the margins so that they do not become too large on small screens. If it is 1 or more, adding s will shrink it to size -1 on mobile. (e.g. 1s) If it is 2 or more, adding m will shrink it to size 1 on mobile. (e.g. 2m)


<div data-unitone-layout="popover -gap:1">
	<div data-unitone-layout="popover-trigger">
		<button popovertarget="popover-gap-content">Open popover</button>
	</div>
	<div
		id="popover-gap-content"
		data-unitone-layout="popover-content"
		popover
	>
		<div data-unitone-layout="popover-dialog">
			The content of the Popover.
		</div>
	</div>
</div>


import {
  Popover,
  PopoverTrigger,
  PopoverContent,
  PopoverDialog,
} from '@inc2734/unitone-css/layout-primitives/popover/react';
 
<Popover gap={1}>
	<PopoverTrigger>
		<button popoverTarget="popover-gap-content">Open popover</button>
	</PopoverTrigger>
	<PopoverContent id="popover-gap-content">
		<PopoverDialog>
			The content of the Popover.
		</PopoverDialog>
	</PopoverContent>
</Popover>

`PopoverContent`

HTML -placement:{value} / JSX placement={value}

Popover placement.

top / right / bottom / left

top


<div data-unitone-layout="popover">
	<div data-unitone-layout="popover-trigger">
		<button popovertarget="popover-top-content">Open popover</button>
	</div>
	<div
		id="popover-top-content"
		data-unitone-layout="popover-content -placement:top"
		popover
	>
		<div data-unitone-layout="popover-dialog">
			The content of the Popover.
		</div>
	</div>
</div>


import {
  Popover,
  PopoverTrigger,
  PopoverContent,
	PopoverDialog,
} from '@inc2734/unitone-css/layout-primitives/popover/react';
 
<Popover>
	<PopoverTrigger>
		<button popoverTarget="popover-top-content">Open popover</button>
	</PopoverTrigger>
	<PopoverContent id="popover-top-content" placement="top">
		<PopoverDialog>
			The content of the Popover.
		</PopoverDialog>
	</PopoverContent>
</Popover>

right


<div data-unitone-layout="popover">
	<div data-unitone-layout="popover-trigger">
		<button popovertarget="popover-right-content">Open popover</button>
	</div>
	<div
		id="popover-right-content"
		data-unitone-layout="popover-content -placement:right"
		popover
	>
		<div data-unitone-layout="popover-dialog">
			The content of the Popover.
		</div>
	</div>
</div>


import {
  Popover,
  PopoverTrigger,
  PopoverContent,
	PopoverDialog,
} from '@inc2734/unitone-css/layout-primitives/popover/react';
 
<Popover>
	<PopoverTrigger>
		<button popoverTarget="popover-right-content">Open popover</button>
	</PopoverTrigger>
	<PopoverContent id="popover-right-content" placement="right">
		<PopoverDialog>
			The content of the Popover.
		</PopoverDialog>
	</PopoverContent>
</Popover>

bottom


<div data-unitone-layout="popover">
	<div data-unitone-layout="popover-trigger">
		<button popovertarget="popover-bottom-content">Open popover</button>
	</div>
	<div
		id="popover-bottom-content"
		data-unitone-layout="popover-content -placement:bottom"
		popover
	>
		<div data-unitone-layout="popover-dialog">
			The content of the Popover.
		</div>
	</div>
</div>


import {
  Popover,
  PopoverTrigger,
  PopoverContent,
	PopoverDialog,
} from '@inc2734/unitone-css/layout-primitives/popover/react';
 
<Popover>
	<PopoverTrigger>
		<button popoverTarget="popover-bottom-content">Open popover</button>
	</PopoverTrigger>
	<PopoverContent id="popover-bottom-content" placement="bottom">
		<PopoverDialog>
			The content of the Popover.
		</PopoverDialog>
	</PopoverContent>
</Popover>

left


<div data-unitone-layout="popover">
	<div data-unitone-layout="popover-trigger">
		<button popovertarget="popover-left-content">Open popover</button>
	</div>
	<div
		id="popover-left-content"
		data-unitone-layout="popover-content -placement:left"
		popover
	>
		<div data-unitone-layout="popover-dialog">
			The content of the Popover.
		</div>
	</div>
</div>


import {
  Popover,
  PopoverTrigger,
  PopoverContent,
	PopoverDialog,
} from '@inc2734/unitone-css/layout-primitives/popover/react';
 
<Popover>
	<PopoverTrigger>
		<button popoverTarget="popover-left-content">Open popover</button>
	</PopoverTrigger>
	<PopoverContent id="popover-left-content" placement="left">
		<PopoverDialog>
			The content of the Popover.
		</PopoverDialog>
	</PopoverContent>
</Popover>

`PopoverDialog`

HTML -shadow / JSX shadow

Add the box shadow.


	<div data-unitone-layout="popover">
		<div data-unitone-layout="popover-trigger">
			<button popovertarget="popover-shadow-content">Open popover</button>
		</div>
		<div
			id="popover-shadow-content"
			data-unitone-layout="popover-content"
			popover
		>
			<div data-unitone-layout="popover-dialog -shadow">
				The content of the Popover.
			</div>
		</div>
	</div>


import {
  Popover,
  PopoverTrigger,
  PopoverContent,
	PopoverDialog,
} from '@inc2734/unitone-css/layout-primitives/popover/react';
 
<Popover>
	<PopoverTrigger>
		<button popoverTarget="popover-shadow-content">Open popover</button>
	</PopoverTrigger>
	<PopoverContent id="popover-shadow-content">
		<PopoverDialog shadow>
			The content of the Popover.
		</PopoverDialog>
	</PopoverContent>
</Popover>

Notes

In HTML, set id, popovertarget, and popover manually.
In React, use a direct child element such as <button> inside PopoverTrigger.
This primitive depends on browser support for both the Popover API and Anchor Positioning.