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

The HTML templating language for Go – created and maintained by @a-h.

Joined December 2021

Installation

Sides

This hover card appears on the Left side of the trigger.

This hover card appears on the Top side of the trigger.

This hover card appears on the Bottom side of the trigger.

This hover card appears on the Right side of the trigger.

Required parameter

Hover for description

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

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

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`