Follow on twitter
Docs
Hover Dialog

Hover Dialog

The Hover Dialog is a ready-to-use component that activates when a user hovers over a designated area. Upon hovering, the dialog appears, displaying relevant information in an engaging and unobtrusive manner. This feature enhances user experience by providing instant access to content without requiring a click.

Title for Custom Dialog
The dialog is an interactive feature that presents content of custom dialog.

Installation

Install the following.

pnpm add next-shadcn

Usage

<HoverDialog
  	sectionClassName: "flex items-center justify-center p-10 min-h-[40vh] relative bg-cover bg-center bg-no-repeat bg-[url('/img.svg')]"
	cardClassName: "backdrop-blur-xl bg-white/30 border p-6 w-full sm:w-50 md:w-80 lg:w-96 h-auto dark:border-white dark:text-black"
	titleClassName: "font-bold text-xl"
	descriptionClassName: "pt-2"
	backgroundImage: "/img.svg"
	buttonColor: "bg-purple-800 text-white shadow hover:bg-purple-900"
	cardTitle: "Title for Custom Dialog"
	cardDescription: "The dialog is an interactive feature that presents content of custom dialog."  
	dialogTitle: "Title for Hover Dialog"
	dialogDescription: "The hover dialog is an interactive feature that presents content of dialog in hover."
	popoverTitle: "Title for Popover"
	popoverDescription: "The dialog is an interactive feature that presents content of popover."
	hoverButton: "Hover"
	dialogButton: "Open Dialog"
	closeButton: "close"
	triggerButton: "Trigger"
/>
Menu DialogForm Dialog