Popover
Display additional information in a popover on click or hover
DuneUI Pro Tag Helper
Popover is a DuneUI Pro Tag Helper and not currently available. DuneUI Pro is a paid package which will be released around March 2026.
<dui-popover>
<dui-popover-trigger as-child="true">
<dui-button variant="ButtonVariant.Outline">
<dui-icon name="sliders-horizontal" class="text-muted-foreground"/>
Configure View
</dui-button>
</dui-popover-trigger>
<dui-popover-content class="flex flex-col gap-3">
<dui-field-set>
<dui-field-legend variant="FieldLegendVariant.Label">Sort By</dui-field-legend>
<dui-field-group data-slot="radio-group">
<dui-field orientation="FieldOrientation.Horizontal">
<dui-input type="radio" name="sort-by" value="departure" id="sort-departure" checked/>
<dui-field-label for="sort-departure" class="font-normal">
Departure Date
</dui-field-label>
</dui-field>
<dui-field orientation="FieldOrientation.Horizontal">
<dui-input type="radio" name="sort-by" value="posted" id="sort-posted"/>
<dui-field-label for="sort-posted" class="font-normal">
Date Posted
</dui-field-label>
</dui-field>
</dui-field-group>
</dui-field-set>
<dui-separator orientation="SeparatorOrientation.Horizontal"/>
<dui-field-set>
<dui-field-legend variant="FieldLegendVariant.Label">View As</dui-field-legend>
<dui-field-group data-slot="radio-group">
<dui-field orientation="FieldOrientation.Horizontal">
<dui-input type="radio" name="view-as" value="departure" id="view-list" checked/>
<dui-field-label for="view-list" class="font-normal">
List
</dui-field-label>
</dui-field>
<dui-field orientation="FieldOrientation.Horizontal">
<dui-input type="radio" name="view-as" value="posted" id="view-gallery"/>
<dui-field-label for="view-gallery" class="font-normal">
Gallery
</dui-field-label>
</dui-field>
</dui-field-group>
</dui-field-set>
</dui-popover-content>
</dui-popover>Usage
<dui-popover>
<dui-popover-trigger>
<!-- add the element that triggers the popover here -->
</dui-popover-trigger>
<dui-popover-content>
<!-- add the popover content here -->
</dui-popover-content>
</dui-popover>Examples
Button as trigger
DuneUI Pro Tag Helper
as-child is a DuneUI Pro Tag Helper and not currently available. DuneUI Pro is a paid package which will be released around March 2026.
The dui-popover-trigger is rendered as a button. This creates issues when you want to add a button element inside the trigger as you cannot use nested button elements.
To work around this limitation, make sure you add the as-child Tag Helper attribute to dui-popover-trigger. This will merge the attributes and behavior of dui-popover-trigger with its child content and render a single button element.
<dui-popover>
<dui-popover-trigger as-child="true">
<dui-button variant="ButtonVariant.Outline">Use as-child with Button</dui-button>
</dui-popover-trigger>
<dui-popover-content>
<dui-stack>
<dui-skeleton class="h-4 w-[250px]"/>
<dui-skeleton class="h-4 w-[250px]"/>
</dui-stack>
</dui-popover-content>
</dui-popover>The as-child Tag Helper is very powerful but comes with some caveats. Please
refer to the documentation for more
information.
Hover
You can trigger the popover on hover using the open-on-hover attribute.
<dui-popover open-on-hover="true">
<dui-popover-trigger class="cursor-pointer flex items-center gap-3">
<dui-avatar src="https://api.dicebear.com/9.x/adventurer-neutral/svg?seed=Brooklynn"/>
<span class="font-medium">Ibn Battuta</span>
</dui-popover-trigger>
<dui-popover-content class="flex flex-col gap-3">
<dui-avatar src="https://api.dicebear.com/9.x/adventurer-neutral/svg?seed=Brooklynn"/>
<div>
<p class="font-medium">Ibn Battuta</p>
<div class="flex items-center gap-2">
<div>@@ibnbattuta</div>
<dui-badge>Follows you</dui-badge>
</div>
</div>
<div class="flex items-center gap-4">
<p><span class="font-medium">655</span> following</p>
<p><span class="font-medium">100.3k</span> followers</p>
</div>
<div class="flex gap-2">
<dui-button variant="ButtonVariant.Secondary" class="flex-1">
<dui-icon name="check"/>
Following
</dui-button>
<dui-button class="flex-1">
<dui-icon name="mail"/>
Message
</dui-button>
</div>
</dui-popover-content>
</dui-popover>Position
Control the position of the popover relative to the trigger element using the popup-side and popup-align attributes.
<dui-popover popup-side="PopupSide.Top" popup-align="PopupAlign.Start">
<dui-popover-trigger as-child="true">
<dui-button variant="ButtonVariant.Outline" class="w-full">Top Start</dui-button>
</dui-popover-trigger>
<dui-popover-content class="w-[230px]">
<dui-stack>
<dui-skeleton class="h-4 w-[200px]"/>
<dui-skeleton class="h-4 w-[200px]"/>
</dui-stack>
</dui-popover-content>
</dui-popover>
<dui-popover popup-side="PopupSide.Right" popup-align="PopupAlign.Center">
<dui-popover-trigger as-child="true">
<dui-button variant="ButtonVariant.Outline" class="w-full">Right Center</dui-button>
</dui-popover-trigger>
<dui-popover-content class="w-[230px]">
<dui-stack>
<dui-skeleton class="h-4 w-[200px]"/>
<dui-skeleton class="h-4 w-[200px]"/>
</dui-stack>
</dui-popover-content>
</dui-popover>
<dui-popover popup-side="PopupSide.Left" popup-align="PopupAlign.End">
<dui-popover-trigger as-child="true">
<dui-button variant="ButtonVariant.Outline" class="w-full">Left End</dui-button>
</dui-popover-trigger>
<dui-popover-content class="w-[230px]">
<dui-stack>
<dui-skeleton class="h-4 w-[200px]"/>
<dui-skeleton class="h-4 w-[200px]"/>
</dui-stack>
</dui-popover-content>
</dui-popover>
<dui-popover popup-side="PopupSide.Bottom" popup-align="PopupAlign.End">
<dui-popover-trigger as-child="true">
<dui-button variant="ButtonVariant.Outline" class="w-full">Bottom End</dui-button>
</dui-popover-trigger>
<dui-popover-content class="w-[230px]">
<dui-stack>
<dui-skeleton class="h-4 w-[200px]"/>
<dui-skeleton class="h-4 w-[200px]"/>
</dui-stack>
</dui-popover-content>
</dui-popover>Offset
Control the offset of the popover from the trigger element using the popup-offset attribute.
<dui-popover popup-offset="20">
<dui-popover-trigger as-child="true">
<dui-button variant="ButtonVariant.Outline">Offset</dui-button>
</dui-popover-trigger>
<dui-popover-content>
<dui-stack>
<dui-skeleton class="h-4 w-[250px]"/>
<dui-skeleton class="h-4 w-[250px]"/>
</dui-stack>
</dui-popover-content>
</dui-popover>Open by default
Open a popover by default using the default-open attribute.
<dui-popover default-open="true">
<dui-popover-trigger as-child="true">
<dui-button variant="ButtonVariant.Outline">Open by default</dui-button>
</dui-popover-trigger>
<dui-popover-content>
<dui-stack>
<dui-skeleton class="h-4 w-[250px]"/>
<dui-skeleton class="h-4 w-[250px]"/>
</dui-stack>
</dui-popover-content>
</dui-popover>Teleport
Use the teleport attribute of dui-popover-content to teleport your popup content to another part of the DOM. This is helpful to break out of the z-index of the current container.
<dui-popover>
<dui-popover-trigger as-child="true">
<dui-button variant="ButtonVariant.Outline">Teleport</dui-button>
</dui-popover-trigger>
<dui-popover-content teleport="body">
<p>This popup is a child element of the <body> element.</p>
</dui-popover-content>
</dui-popover>