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.

Width

Height

package showcase

import (
	"github.com/templui/templui/components/button"
	"github.com/templui/templui/components/input"
	"github.com/templui/templui/components/label"
	"github.com/templui/templui/components/popover"
	"github.com/templui/templui/utils"
)

templ PopoverDefault() {
	@popover.Root() {
		@popover.Trigger() {
			@button.Button(button.Props{
				Variant: button.VariantOutline,
			}) {
				Open Popover
			}
		}
		@popover.Content() {
			@PopoverContent()
		}
	}
}

templ PopoverContent() {
	{{ var id = utils.RandomID() }}
	<div class="p-4 space-y-4">
		<div>
			<h3 class="text-lg font-semibold">Dimensions</h3>
			<p>Set the dimensions for the layer.</p>
		</div>
		<div class="flex flex-col gap-2 max-w-fit">
			<div class="flex items-center gap-2">
				@label.Label(label.Props{
					For:   "width" + id,
					Class: "w-24",
				}) {
					Width
				}
				@input.Input(input.Props{
					ID:          "width" + id,
					Placeholder: "Width",
					Value:       "100%",
					Class:       "flex-1",
				})
			</div>
			<div class="flex items-center gap-2">
				@label.Label(label.Props{
					For:   "height" + id,
					Class: "w-24",
				}) {
					Height
				}
				@input.Input(input.Props{
					ID:          "height" + id,
					Placeholder: "Height",
					Value:       "100%",
					Class:       "flex-1",
				})
			</div>
		</div>
	</div>
}

Installation

templui add popover

Load the script once in your layout:

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

Examples

Trigger & Closing

Dimensions

Set the dimensions for the layer.

Width

Height

Dimensions

Set the dimensions for the layer.

Width

Height

Dimensions

Set the dimensions for the layer.

Width

Height

Dimensions

Set the dimensions for the layer.

Width

Height

package showcase

import (
	"github.com/templui/templui/components/button"
	"github.com/templui/templui/components/popover"
)

templ PopoverTriggers() {
	<div class="flex gap-2 flex-wrap">
		@popover.Root() {
			@popover.Trigger(popover.TriggerProps{
				TriggerType: popover.TriggerTypeHover,
			}) {
				@button.Button(button.Props{Variant: button.VariantOutline}) {
					Hover
				}
			}
			@popover.Content(popover.ContentProps{
				HoverDelay:    300,
				HoverOutDelay: 500,
			}) {
				@PopoverContent()
			}
		}
		@popover.Root() {
			@popover.Trigger() {
				@button.Button(button.Props{Variant: button.VariantOutline}) {
					Click
				}
			}
			@popover.Content() {
				@PopoverContent()
			}
		}
		@popover.Root() {
			@popover.Trigger() {
				@button.Button(button.Props{Variant: button.VariantOutline}) {
					No ClickAway
				}
			}
			@popover.Content(popover.ContentProps{
				DisableClickAway: true,
			}) {
				@PopoverContent()
			}
		}
		@popover.Root() {
			@popover.Trigger() {
				@button.Button(button.Props{Variant: button.VariantOutline}) {
					No ClickAway-ESC
				}
			}
			@popover.Content(popover.ContentProps{
				DisableClickAway: true,
				DisableESC:       true,
			}) {
				@PopoverContent()
			}
		}
	</div>
}

Positions

Dimensions

Set the dimensions for the layer.

Width

Height

Dimensions

Set the dimensions for the layer.

Width

Height

Dimensions

Set the dimensions for the layer.

Width

Height

Dimensions

Set the dimensions for the layer.

Width

Height

Dimensions

Set the dimensions for the layer.

Width

Height

Dimensions

Set the dimensions for the layer.

Width

Height

Dimensions

Set the dimensions for the layer.

Width

Height

Dimensions

Set the dimensions for the layer.

Width

Height

Dimensions

Set the dimensions for the layer.

Width

Height

Dimensions

Set the dimensions for the layer.

Width

Height

Dimensions

Set the dimensions for the layer.

Width

Height

Dimensions

Set the dimensions for the layer.

Width

Height

package showcase

import (
	"github.com/templui/templui/components/button"
	"github.com/templui/templui/components/popover"
)

templ PopoverPositions() {
	<div class="flex flex-col w-full max-w-md">
		<div class="grid grid-cols-3 gap-2">
			@popover.Root() {
				@popover.Trigger(popover.TriggerProps{TriggerType: popover.TriggerTypeHover}) {
					@button.Button(button.Props{Class: "w-full", Variant: button.VariantOutline}) {
						Top Start 
					}
				}
				@popover.Content(popover.ContentProps{Placement: popover.PlacementTopStart, ShowArrow: true}) {
					@PopoverContent()
				}
			}
			@popover.Root() {
				@popover.Trigger(popover.TriggerProps{TriggerType: popover.TriggerTypeHover}) {
					@button.Button(button.Props{Class: "w-full", Variant: button.VariantOutline}) {
						Top 
					}
				}
				@popover.Content(popover.ContentProps{Placement: popover.PlacementTop, ShowArrow: true}) {
					@PopoverContent()
				}
			}
			@popover.Root() {
				@popover.Trigger(popover.TriggerProps{TriggerType: popover.TriggerTypeHover}) {
					@button.Button(button.Props{Class: "w-full", Variant: button.VariantOutline}) {
						Top End 
					}
				}
				@popover.Content(popover.ContentProps{Placement: popover.PlacementTopEnd, ShowArrow: true}) {
					@PopoverContent()
				}
			}
			@popover.Root() {
				@popover.Trigger(popover.TriggerProps{TriggerType: popover.TriggerTypeHover}) {
					@button.Button(button.Props{Class: "w-full", Variant: button.VariantOutline}) {
						Right Start 
					}
				}
				@popover.Content(popover.ContentProps{Placement: popover.PlacementRightStart, ShowArrow: true}) {
					@PopoverContent()
				}
			}
			@popover.Root() {
				@popover.Trigger(popover.TriggerProps{TriggerType: popover.TriggerTypeHover}) {
					@button.Button(button.Props{Class: "w-full", Variant: button.VariantOutline}) {
						Right 
					}
				}
				@popover.Content(popover.ContentProps{Placement: popover.PlacementRight, ShowArrow: true}) {
					@PopoverContent()
				}
			}
			@popover.Root() {
				@popover.Trigger(popover.TriggerProps{TriggerType: popover.TriggerTypeHover}) {
					@button.Button(button.Props{Class: "w-full", Variant: button.VariantOutline}) {
						Right End 
					}
				}
				@popover.Content(popover.ContentProps{Placement: popover.PlacementRightEnd, ShowArrow: true}) {
					@PopoverContent()
				}
			}
			@popover.Root() {
				@popover.Trigger(popover.TriggerProps{TriggerType: popover.TriggerTypeHover}) {
					@button.Button(button.Props{Class: "w-full", Variant: button.VariantOutline}) {
						Bottom Start 
					}
				}
				@popover.Content(popover.ContentProps{Placement: popover.PlacementBottomStart, ShowArrow: true}) {
					@PopoverContent()
				}
			}
			@popover.Root() {
				@popover.Trigger(popover.TriggerProps{TriggerType: popover.TriggerTypeHover}) {
					@button.Button(button.Props{Class: "w-full", Variant: button.VariantOutline}) {
						Bottom 
					}
				}
				@popover.Content(popover.ContentProps{Placement: popover.PlacementBottom, ShowArrow: true}) {
					@PopoverContent()
				}
			}
			@popover.Root() {
				@popover.Trigger(popover.TriggerProps{TriggerType: popover.TriggerTypeHover}) {
					@button.Button(button.Props{Class: "w-full", Variant: button.VariantOutline}) {
						Bottom End 
					}
				}
				@popover.Content(popover.ContentProps{Placement: popover.PlacementBottomEnd, ShowArrow: true}) {
					@PopoverContent()
				}
			}
			@popover.Root() {
				@popover.Trigger(popover.TriggerProps{TriggerType: popover.TriggerTypeHover}) {
					@button.Button(button.Props{Class: "w-full", Variant: button.VariantOutline}) {
						Left Start 
					}
				}
				@popover.Content(popover.ContentProps{Placement: popover.PlacementLeftStart, ShowArrow: true}) {
					@PopoverContent()
				}
			}
			@popover.Root() {
				@popover.Trigger(popover.TriggerProps{TriggerType: popover.TriggerTypeHover}) {
					@button.Button(button.Props{Class: "w-full", Variant: button.VariantOutline}) {
						Left 
					}
				}
				@popover.Content(popover.ContentProps{Placement: popover.PlacementLeft, ShowArrow: true}) {
					@PopoverContent()
				}
			}
			@popover.Root() {
				@popover.Trigger(popover.TriggerProps{TriggerType: popover.TriggerTypeHover}) {
					@button.Button(button.Props{Class: "w-full", Variant: button.VariantOutline}) {
						Left End 
					}
				}
				@popover.Content(popover.ContentProps{Placement: popover.PlacementLeftEnd, ShowArrow: true}) {
					@PopoverContent()
				}
			}
		</div>
	</div>
}

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");

Menu

Getting Started

Components

Popover

Dimensions

Installation

Examples

Dimensions

Dimensions

Dimensions

Dimensions

Dimensions

Dimensions

Dimensions

Dimensions

Dimensions

Dimensions

Dimensions

Dimensions

Dimensions

Dimensions

Dimensions

Dimensions

API Reference

Root

Trigger

Content

JavaScript API