Microsoft Lists: Create Hover Cards

Key insights

• Hover Cards
  Interactive overlays in Microsoft Lists and SharePoint that show extra metadata or actions when users hover or click an item.
  They let users preview details like file info or user profiles without opening the item.
• List Formatting JSON
  Use JSON to define card content and behavior with properties like openOnEvent, directionalHint, beak and beakStyle, plus nested menus and action handlers.
  JSON also supports setValue and action definitions to update fields or trigger flows from the card.
• Design and Layout
  Cards can include image headers, icon overlays, badges, fixed sizes and styled buttons to create gallery-like views and richer visual layouts.
  Design each section clearly so users scan content quickly and tap actions reliably.
• Developer Tips
  Host images and icons in site asset libraries and reference them by URL in the JSON.
  Test hover vs click interactions to avoid blocking clicks, and reuse ready-to-copy samples or the Card Designer to speed development.
• Benefits
  Hover cards improve usability by reducing clicks, speeding access to key metadata, and keeping users in context while they browse lists.
  They work well for previewing documents, profile info, or actionable links without leaving the list view.
• Accessibility and Maintenance
  Build cards with responsive layout and clear focus order, then test across devices and assistive tools to ensure accessibility.
  Keep JSON samples under version control and follow community examples for long-term maintenance and best practices.

By Microsoft: a recent YouTube demo highlights how developers and power users can build richer interactions inside Microsoft Lists by using List Formatting JSON to create dynamic hover cards. The video, presented by Chris Kent during a Microsoft 365 & Power Platform community call in August 2025, walks through both the default person/file cards and fully custom cards. It shows practical examples, reusable samples, and configuration options that change how information appears when users hover or click on list items. This article summarizes the demo and explains the benefits, tradeoffs, and challenges involved.

Video snapshot and context

The demo opens with an explanation of what hover cards are and why they matter in list interfaces. Essentially, hover cards are small overlay panels that reveal metadata, images, and actions without forcing users to open a separate item view. Chris Kent demonstrates real-world scenarios where these cards speed up workflows by surfacing details at a glance. Moreover, the presentation emphasizes that these capabilities fit naturally into board, gallery, and tile views within lists.

Next, the presenter contrasts built-in person and file hover cards with fully custom implementations created with List Formatting JSON. He highlights how custom cards can include image headers, badges, and buttons while preserving accessibility and responsiveness. The demo also includes ready-to-copy JSON samples so that developers can adapt examples quickly. Consequently, the video acts both as a tutorial and a practical reference for teams building modern list experiences.

How hover cards are constructed

Chris shows that developers build hover cards by extending the JSON view or column format and by using properties such as customCardProps to control behavior. For instance, options like openOnEvent let authors decide whether cards appear on hover or click, and directionalHint sets card placement. The demo also covers visual elements such as beaks and beak styles and explains how to nest menus and actions inside a card. As a result, developers can craft cards that both look polished and behave predictably across different layouts.

In addition, the video demonstrates interactive patterns using setValue and action handlers to update list items directly from the card. This approach reduces context switching by letting users trigger workflows or update fields without leaving the list view. Chris also discusses hosting assets like images in site libraries and referencing them from JSON to ensure consistent branding. Thus, the technical guidance balances performance, maintainability, and visual polish.

New capabilities and practical gains

The presentation highlights recent improvements that solve previous friction points, such as hover elements blocking click actions. Now, overlay buttons and clickable regions can coexist so that hover previews do not prevent users from opening items. Also, fixed-size content cards, image headers, and styled buttons help produce a gallery-like presentation inside lists while keeping layout predictable. These additions make it easier for teams to present richer data without building custom web parts.

Furthermore, the demo showcases the Card Designer and other tooling that simplify layout configuration for non-developers. While the designer streamlines repetitive work, the JSON approach still provides the fine-grained control developers need for complex scenarios. In practice, this hybrid model reduces implementation time while retaining extensibility. Therefore, teams can adopt hover cards incrementally according to skill level and business need.

Tradeoffs and implementation challenges

Despite the benefits, the approach involves tradeoffs that teams must weigh carefully. For example, adding rich hover cards increases the amount of data rendered on a page, which can affect initial load and memory use. Designers and developers must therefore balance visual richness with performance and test on lower-powered devices. In addition, deep interactivity inside cards requires careful event handling to avoid conflicts between hover and click behaviors.

Accessibility is another important challenge. While cards can expose useful actions, authors must ensure keyboard access and screen-reader compatibility. The JSON schema and tooling include accessibility options, but teams still need to validate results with automated and manual testing. Finally, maintaining many custom JSON templates can increase upkeep, so governance and reuse strategies are essential for long-term stability.

Practical tips and next steps

Chris recommends starting with sample templates and adapting them to the organization’s needs rather than building from scratch. He also suggests hosting reusable images and icons in central libraries and keeping JSON modular to simplify updates. Testing across view types and devices helps catch interaction issues early, and documenting patterns in a shared gallery makes reuse easier across teams.

In closing, the video demonstrates that hover cards implemented via List Formatting JSON can significantly improve productivity and user experience in Microsoft Lists. Nevertheless, teams should plan for tradeoffs around performance, accessibility, and maintenance. By following the demo’s samples and guidance, practitioners can adopt hover cards progressively and balance aesthetics with robustness.

Keywords

hover cards list formatting, sharepoint hover cards, list formatting hover cards, json list formatting hover, spfx hover card examples, sharepoint list hover card tutorial, adaptive cards hover sharepoint, custom hover card list formatting