DashKit Icon
DashKit
Dashboard UI Kit
Getting Started
Structure
Components
Variables
Dark Mode
Installation
Template
Style Guide
Licensing
Changelog
Powered by Webflow
Template
Components
Component Documentation
@DashKit
Placeholder logo for DashKit's hover card component.
DashKit
Design without limits. Webflow puts the power of code into a visual canvas so every team can create stunning websites quickly.
Built by Webflow Experts
@DashKit
Placeholder logo for DashKit's hover card component.
DashKit
Design without limits. Webflow puts the power of code into a visual canvas so every team can create stunning websites quickly.
Built by Webflow Experts

Hover Card

The Hover Card component shows extra content when a user hovers over a trigger — great for previews, tooltips, or extra info without cluttering the page.

It works by wrapping a trigger element (in this example, a button) and showing a card when hovered. The card itself appears next to the trigger and can contain any content you like.

We've included dummy content in the card to show how it works, but you're free to replace it with your own.

Usage

  1. Drag the Hover Card component onto the canvas.
  2. Drop in a trigger element (a button is used by default).
  3. Drop in content in the content slot

This is perfect for subtle UI interactions like user previews, extra details, or contextual help.

GSAP powered interaction

This dropdown menu uses Webflow’s new GSAP-powered Interactions. When the .hover_trigger is clicked, the .hover_card animates in, and clicking it again hides it with the same smooth effect.