Ship faster with goilerplate • Get it now for $99 instead of $199

Popover

Displays rich content in a floating layer using the native browser popover API and Floating UI for positioning.

Source Tailwind CSS JavaScript

Dimensions

Set the dimensions for the layer.

Installation

templui add popover

Load the script once in your layout:

<head> @popover.Script() </head>

Examples

Basic

Dimensions

Set the dimensions for the layer.

Align

Aligned to start
Aligned to center
Aligned to end

With Form

Dimensions

Set the dimensions for the layer.

API Reference

Required parameter
Hover for description

Root

Local popover instance that groups one trigger with one content element.

Name Type Default
 
ID

Optional root ID for the JavaScript API. Internal trigger-content wiring does not use it.

 
string
 -
Class

Additional CSS classes to apply to the root wrapper.

 
string
 -
Attributes

Additional HTML attributes to apply to the root wrapper.

 
templ.Attributes
 -

Trigger

Element inside a Root that opens the matching popover content.

Name Type Default
 
ID

Optional HTML id for the trigger element.

 
string
 -
Class

Additional CSS classes to apply to the trigger.

 
string
 -
Attributes

Additional HTML attributes to apply to the trigger element.

 
templ.Attributes
 -
TriggerType

How the popover is triggered. Options: 'click', 'hover', 'manual'.

 
TriggerType
 
click

Content

Popover content inside the same Root. Placement and closing behavior are configured here.

Name Type Default
 
ID

Optional HTML id for the content element.

 
string
 -
Class

Additional CSS classes to apply to the content.

 
string
 -
Attributes

Additional HTML attributes to apply to the content element.

 
templ.Attributes
 -
Placement

Position of the popover relative to trigger. Options: 'top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end'.

 
Placement
 
bottom
Offset

Distance in pixels between the trigger and popover content.

 
int
 
4 (or 8 with arrow)
DisableClickAway

Prevents closing the popover when clicking outside.

 
bool
 
false
DisableESC

Prevents closing the popover with the ESC key.

 
bool
 
false
ShowArrow

Whether to show an arrow pointing to the trigger element.

 
bool
 
false
HoverDelay

Delay in milliseconds before showing the popover on hover.

 
int
 
0
HoverOutDelay

Delay in milliseconds before hiding the popover on hover out.

 
int
 
0
Exclusive

When true, opening this popover will close other exclusive popovers.

 
bool
 
false

JavaScript API

window.tui.popover.open("root-id"); window.tui.popover.close("root-id"); window.tui.popover.closeAll(); window.tui.popover.toggle("root-id"); const isOpen = window.tui.popover.isOpen("root-id");