Popover
A popover is a floating panel that displays content over other page elements.
Usage
The popover component is used to display floating panels with arbitrary content — perfect for things like navigation menus, tooltips, and flyouts.
Basic
<div class="flex items-center justify-center p-8"> <twig:ui:Button popovertarget="basic-popover"> Open </twig:ui:Button> </div> <twig:ui:Popover id="basic-popover"> <twig:ui:Popover:Content class="max-w-sm"> <p class="font-medium leading-none">Popover</p> </twig:ui:Popover:Content> </twig:ui:Popover>
Placements
<div class="grid grid-cols-3 grid-rows-3 gap-4 p-4 place-items-center"> <div class="col-start-1 row-start-1"> <div class="flex items-center justify-center p-8"> <twig:ui:Button popovertarget="top-start-popover"> Top Start </twig:ui:Button> </div> </div> <div class="col-start-2 row-start-1"> <div class="flex items-center justify-center p-8"> <twig:ui:Button popovertarget="top-popover"> Top </twig:ui:Button> </div> </div> <div class="col-start-3 row-start-1"> <div class="flex items-center justify-center p-8"> <twig:ui:Button popovertarget="top-end-popover"> Top End </twig:ui:Button> </div> </div> <div class="col-start-1 row-start-2"> <div class="flex items-center justify-center p-8"> <twig:ui:Button popovertarget="left-popover"> Left </twig:ui:Button> </div> </div> <div class="col-start-3 row-start-2"> <div class="flex items-center justify-center p-8"> <twig:ui:Button popovertarget="right-popover"> Right </twig:ui:Button> </div> </div> <div class="col-start-1 row-start-3"> <div class="flex items-center justify-center p-8"> <twig:ui:Button popovertarget="bottom-start-popover"> Bottom Start </twig:ui:Button> </div> </div> <div class="col-start-2 row-start-3"> <div class="flex items-center justify-center p-8"> <twig:ui:Button popovertarget="bottom-popover"> Bottom </twig:ui:Button> </div> </div> <div class="col-start-3 row-start-3"> <div class="flex items-center justify-center p-8"> <twig:ui:Button popovertarget="bottom-end-popover"> Bottom End </twig:ui:Button> </div> </div> </div> <twig:ui:Popover id="top-start-popover" position="top-start"> <twig:ui:Popover:Content class="w-fit p-4"> <p class="font-medium leading-none">top-start</p> <twig:ui:Popover:Arrow/> </twig:ui:Popover:Content> </twig:ui:Popover> <twig:ui:Popover id="top-popover" position="top"> <twig:ui:Popover:Content class="w-fit p-4"> <p class="font-medium leading-none">top</p> <twig:ui:Popover:Arrow/> </twig:ui:Popover:Content> </twig:ui:Popover> <twig:ui:Popover id="top-end-popover" position="top-end"> <twig:ui:Popover:Content class="w-fit p-4"> <p class="font-medium leading-none">top-end</p> <twig:ui:Popover:Arrow/> </twig:ui:Popover:Content> </twig:ui:Popover> <twig:ui:Popover id="left-popover" position="left"> <twig:ui:Popover:Content class="w-fit p-4"> <p class="font-medium leading-none">left</p> <twig:ui:Popover:Arrow/> </twig:ui:Popover:Content> </twig:ui:Popover> <twig:ui:Popover id="right-popover" position="right"> <twig:ui:Popover:Content class="w-fit p-4"> <p class="font-medium leading-none">right</p> <twig:ui:Popover:Arrow/> </twig:ui:Popover:Content> </twig:ui:Popover> <twig:ui:Popover id="bottom-start-popover" position="bottom-start"> <twig:ui:Popover:Content class="w-fit p-4"> <p class="font-medium leading-none">bottom-start</p> <twig:ui:Popover:Arrow/> </twig:ui:Popover:Content> </twig:ui:Popover> <twig:ui:Popover id="bottom-popover" position="bottom"> <twig:ui:Popover:Content class="w-fit p-4"> <p class="font-medium leading-none">bottom</p> <twig:ui:Popover:Arrow/> </twig:ui:Popover:Content> </twig:ui:Popover> <twig:ui:Popover id="bottom-end-popover" position="bottom-end"> <twig:ui:Popover:Content class="w-fit p-4"> <p class="font-medium leading-none">bottom-end</p> <twig:ui:Popover:Arrow/> </twig:ui:Popover:Content> </twig:ui:Popover>
SideOffset
<div class="flex items-center justify-center gap-4"> <twig:ui:Button popovertarget="custom-gap-popover"> Open </twig:ui:Button> <twig:ui:Button popovertarget="custom-gap-popover-arrow"> Open </twig:ui:Button> </div> <twig:ui:Popover id="custom-gap-popover" sideOffset="16"> <twig:ui:Popover:Content class="w-fit p-4"> <p class="font-medium leading-none">Default</p> </twig:ui:Popover:Content> </twig:ui:Popover> <twig:ui:Popover id="custom-gap-popover-arrow" sideOffset="16"> <twig:ui:Popover:Content class="w-fit p-4"> <p class="font-medium leading-none">With arrow</p> <twig:ui:Popover:Arrow/> </twig:ui:Popover:Content> </twig:ui:Popover>
AvoidCollisions
<div class="grid grid-cols-3 grid-rows-3 gap-4 p-4 place-items-center"> <div class="col-start-2 row-start-1"> <div class="flex items-center justify-center p-8"> <twig:ui:Button popovertarget="top-flip-popover"> Popover top </twig:ui:Button> </div> </div> <div class="col-start-1 row-start-2"> <div class="flex items-center justify-center p-8"> <twig:ui:Button popovertarget="left-flip-popover"> Popover left </twig:ui:Button> </div> </div> <div class="col-start-3 row-start-2"> <div class="flex items-center justify-center p-8"> <twig:ui:Button popovertarget="right-flip-popover"> Popover right </twig:ui:Button> </div> </div> <div class="col-start-2 row-start-3"> <div class="flex items-center justify-center p-8"> <twig:ui:Button popovertarget="bottom-flip-popover"> Popover bottom </twig:ui:Button> </div> </div> </div> <twig:ui:Popover id="top-flip-popover" position="top" avoidCollisions> <twig:ui:Popover:Content class="w-fit p-4"> <p class="font-medium leading-none">top</p> <twig:ui:Popover:Arrow/> </twig:ui:Popover:Content> </twig:ui:Popover> <twig:ui:Popover id="left-flip-popover" position="left" avoidCollisions> <twig:ui:Popover:Content class="w-fit p-4"> <p class="font-medium leading-none">left</p> <twig:ui:Popover:Arrow/> </twig:ui:Popover:Content> </twig:ui:Popover> <twig:ui:Popover id="right-flip-popover" position="right" avoidCollisions> <twig:ui:Popover:Content class="w-fit p-4"> <p class="font-medium leading-none">right</p> <twig:ui:Popover:Arrow/> </twig:ui:Popover:Content> </twig:ui:Popover> <twig:ui:Popover id="bottom-flip-popover" position="bottom" avoidCollisions> <twig:ui:Popover:Content class="w-fit p-4"> <p class="font-medium leading-none">bottom</p> <twig:ui:Popover:Arrow/> </twig:ui:Popover:Content> </twig:ui:Popover>
Sticky
<twig:ui:Button popovertarget="sticky-popover"> Click me (with sticky) </twig:ui:Button> <twig:ui:Popover id="sticky-popover" position="right" sticky hideWhenDetached> <twig:ui:Popover:Content class="w-80 h-20"> <p class="font-medium leading-none">sticky</p> <twig:ui:Popover:Arrow/> </twig:ui:Popover:Content> </twig:ui:Popover>
HideWhenDetached
<twig:ui:Button popovertarget="hide-popover"> Open popover (with hide) </twig:ui:Button> <twig:ui:Popover id="hide-popover" position="top" hideWhenDetached> <twig:ui:Popover:Content class="w-80"> <p class="font-medium leading-none">hide</p> <twig:ui:Popover:Arrow/> </twig:ui:Popover:Content> </twig:ui:Popover>
Screen Lock
<twig:ui:Button popovertarget="screen-lock-popover"> Open Screen Lock Popover </twig:ui:Button> <twig:ui:Popover id="screen-lock-popover" screenLock> <twig:ui:Popover:Content class="w-80"> <p class="font-medium leading-none">screen lock</p> <twig:ui:Popover:Arrow/> </twig:ui:Popover:Content> </twig:ui:Popover>
Group
<div class="flex gap-2"> <twig:ui:Button popovertarget="group-popover-1"> Open 1 </twig:ui:Button> <twig:ui:Button popovertarget="group-popover-2"> Open 2 </twig:ui:Button> <twig:ui:Button popovertarget="group-popover-3"> Open 3 </twig:ui:Button> </div> <twig:ui:Popover:Group> <twig:ui:Popover id="group-popover-1"> <twig:ui:Popover:Content> <p class="font-medium leading-none">Group</p> </twig:ui:Popover:Content> </twig:ui:Popover> <twig:ui:Popover id="group-popover-2"> <twig:ui:Popover:Content> <p class="font-medium leading-none">Group</p> </twig:ui:Popover:Content> </twig:ui:Popover> <twig:ui:Popover id="group-popover-3"> <twig:ui:Popover:Content> <p class="font-medium leading-none">Group</p> </twig:ui:Popover:Content> </twig:ui:Popover> </twig:ui:Popover:Group>