Popover

Displays rich content in a floating layer. Powered by Floating UI.

TailwindCSS

Vanilla JS

package showcase

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

templ PopoverDefault() {
	@popover.Trigger(popover.TriggerProps{
		For: "default-popover",
	}) {
		@button.Button(button.Props{
			Variant: button.VariantOutline,
		}) {
			Open Popover
		}
	}
	@popover.Content(popover.ContentProps{
		ID: "default-popover",
	}) {
		@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

Install the component
```
templui add popover
```
Add the JavaScript to your layout
```
@popover.Script()
```
Call this template in your base layout file (e.g., in the <head> section).

Examples

Trigger & Closing

package showcase

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

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

Positions

package showcase

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

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

API Reference

Required parameter

Hover for description

Trigger

Element that triggers the popover when interacted with.

Name	Type	Default
`ID` Unique identifier 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`	-
`For` ID of the popover content this trigger controls.	`string`	-
`TriggerType` How the popover is triggered. Options: 'click', 'hover'.	`TriggerType`	`click`

Content

Container for the popover content with positioning and behavior options.

Name	Type	Default
`ID` Unique identifier 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 on hover (for hover triggers).	`int`	`0`
`HoverOutDelay` Delay in milliseconds before hiding on hover out (for hover triggers).	`int`	`0`
`MatchWidth` Whether the popover should match the width of the trigger element.	`bool`	`false`

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

Trigger

Content