Hover Card

Displays rich content in a card when hovering over a trigger. Uses Popover for the popup and positioning.

Source Tailwind CSS JavaScript

@templ

A HTML templating language for Go with great developer tooling.

Joined December 2021

package showcase

import (
	"github.com/templui/templui/components/avatar"
	"github.com/templui/templui/components/button"
	"github.com/templui/templui/components/hovercard"
	"github.com/templui/templui/components/icon"
)

templ HoverCardDefault() {
	@hovercard.Root() {
		@hovercard.Trigger() {
			@button.Button(button.Props{Variant: button.VariantLink}) {
				{ "@templ" }
			}
		}
		@hovercard.Content() {
			<div class="flex gap-4">
				@avatar.Avatar() {
					@avatar.Image(avatar.ImageProps{
						Src: "https://avatars.githubusercontent.com/u/26936893?v=4",
						Alt: "templ avatar",
					})
					@avatar.Fallback() {
						TM
					}
				}
				<div class="space-y-1">
					<h4 class="text-sm font-semibold">{ "@templ" }</h4>
					<p class="text-sm">A HTML templating language for Go with great developer tooling.</p>
					<div class="flex items-center pt-2 text-xs text-muted-foreground">
						@icon.Calendar(icon.Props{Class: "mr-2 size-4"})
						<span>Joined December 2021</span>
					</div>
				</div>
			</div>
		}
	}
}

Installation

templui add hovercard

Load the script once in your layout:

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

Examples

Positions

Opens on Top

Opens on Right

Opens on Bottom

Opens on Left

package showcase

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

templ HoverCardPositions() {
	<div class="flex flex-wrap gap-2">
		@hoverCardPosition("Top", hovercard.PlacementTop)
		@hoverCardPosition("Right", hovercard.PlacementRight)
		@hoverCardPosition("Bottom", hovercard.PlacementBottom)
		@hoverCardPosition("Left", hovercard.PlacementLeft)
	</div>
}

templ hoverCardPosition(label string, placement hovercard.Placement) {
	@hovercard.Root() {
		@hovercard.Trigger() {
			@button.Button(button.Props{Variant: button.VariantOutline}) {
				{ label }
			}
		}
		@hovercard.Content(hovercard.ContentProps{
			Placement: placement,
			ShowArrow: true,
			Class:     "w-auto",
		}) {
			<p class="text-sm">Opens on { label }</p>
		}
	}
}

API Reference

Required parameter

Hover for description

Root

Groups one trigger with one hover card content element.

Name	Type	Default
`ID` Optional root ID for the JavaScript API.	`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 that opens the hover card on hover.

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`	-

Content

The hover card surface. Placement and hover delays are configured here.

Name	Type	Default
`ID` Optional HTML id for the content element.	`string`	-
`Class` Additional CSS classes to apply to the content. Override the default width here.	`string`	`w-64 p-4`
`Attributes` Additional HTML attributes to apply to the content element.	`templ.Attributes`	-
`Placement` Position of the card 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 card.	`int`	`4 (or 8 with arrow)`
`ShowArrow` Whether to show an arrow pointing to the trigger element.	`bool`	`false`
`OpenDelay` Delay in milliseconds before showing the card on hover.	`int`	`150`
`CloseDelay` Delay in milliseconds before hiding the card on hover out.	`int`	`300`

Menu

Getting Started

Components