hover_card
Hover Card is a modern Drupal module that displays user information in elegant, accessible popup cards when hovering over user links. Built on Tippy.js, it provides a clean, performant, and highly configurable way to show user details without leaving the current page.
- Zero dependencies - All JavaScript libraries loaded from CDN
- Modern & accessible - Built with vanilla JavaScript, keyboard accessible
- BEM CSS methodology - Clean, maintainable styling
- Highly configurable - Display user picture, email, roles, dates, and custom fields
- Theme-agnostic - Works with Olivero, Classy, and custom themes
- Anonymous user support - Granular permission system
Version 2.0.0
Complete rewrite featuring modern web standards, service-based architecture, and comprehensive test coverage. Special thanks to atomiks for the excellent Tippy.js library!
Key Features
- Dynamic Field Discovery - Automatically detects and displays custom user fields
- Lazy Loading - User data fetched only on hover for optimal performance
- Configurable Display - Toggle visibility of user picture, email, roles, member since, last access, and any custom fields
- CSS Selector Control - Customize which links trigger hover cards
- Service-Based Architecture - Easy to extend and integrate
- Fully Tested - Unit, kernel, and functional tests included
- GitLab CI Ready - Automated testing for contributions
Requirements
- Drupal 10.3+ or Drupal 11
- No additional Drupal modules required
- JavaScript libraries (Tippy.js and Popper.js) loaded automatically from CDN
Installation
- Install via Composer:
composer require drupal/hover_card - Enable the module:
drush en hover_card - Clear cache:
drush cr - Grant permissions at
/admin/people/permissions- enable "View hover cards" for desired roles - Configure at
/admin/config/people/hover-card
Configuration
Navigate to Admin > Configuration > People > Hover Card (/admin/config/people/hover-card)
Permissions
- View hover cards - Allow users (including anonymous) to see hover cards
- Administer Hover Card settings - Configure module settings
Custom User Fields
The module automatically discovers custom fields added to your user entity. Simply enable the ones you want to display in hover cards. Supports text, numeric, boolean, date/time, email, link, entity reference, image, and list fields.
Bio / Description fields
To display a user bio or description, add a text field to the user entity and enable it in the Custom User Fields section of the settings form.
Advanced Settings
Customize the CSS selector to target specific user links. The default selector works with Olivero theme (both teaser and full node view modes) and common markup patterns:
a.username, span[rel="schema:author"] > a, span.node__author a, .node__meta a[href*="/user/"]
Theme Integration
The module uses BEM (Block Element Modifier) methodology for CSS classes. All classes follow Drupal conventions:
CSS Class Structure
The following classes are available for customization:
.hover-card- Main container block.hover-card__image- User profile image element.hover-card__info- User information container.hover-card__name- User name element.hover-card__label- Field label element.hover-card__mail- Email element.hover-card__link- Link element (email, etc.).hover-card__roles- Roles element.hover-card__member-since- Member since element.hover-card__last-access- Last access element.hover-card__field- Custom field container.hover-card__field--{fieldname}- Field-specific modifier.hover-card--loading- Loading state modifier.hover-card--error- Error state modifier
Override these classes in your theme for custom styling. The template file (hover_card.html.twig) can be copied to your theme for complete customization.
Upgrading from 1.x
Important: Version 2.0 includes breaking changes:
- CSS class names changed from
.hover-card-user-*to.hover-card__*(BEM format) - New permission system - grant "view hover cards" permission
- jQuery removed - now uses vanilla JavaScript with Tippy.js
- The
display_biooption has been removed - use Custom User Fields instead - Minimum Drupal version: 10.3+
After updating, run drush updb to clean up deprecated configuration.
Accessibility
- Keyboard accessible (triggered by focus events)
- Semantic HTML structure
- Proper ARIA attributes via Tippy.js
- High contrast support
Performance
- Lazy loading - Data fetched only when the user hovers
- HTTP caching - Responses include
Cache-Controlheaders (5 min max-age) and Drupal cache tags for proper invalidation - Client-side deduplication - Multiple links to the same user share a single fetch request
- Minimal JavaScript footprint - No jQuery, vanilla JS only
- CDN-delivered libraries - Tippy.js and Popper.js loaded from CDN