Skip to content

User Hover Card Popover with Photo

Bootstrap 5 popover hover card showing a user photo, cover band, bio, follower stats and a working follow button.

Also known as: profile hover card, user popover on hover, mention hover card, user preview card

Bootstrap 5 Tooltips & Popovers Responsive #avatar #card #hover #popover #profile

User Hover Card Popover with Photo live demo

Open in new tab

Bootstrap 5 code (HTML, CSS, JS)

A Bootstrap 5 user hover card built on the Popover component: hovering or focusing a name shows a profile card with photo, cover band, bio, follower counts and a working Follow button. It fits comment threads, team chats, social feeds and any list of authors or @mentions.

How it works

The root section.uhc-thread contains a comment list and one template.uhc-template per user. Author names and mentions are button.uhc-trigger elements whose data-uhc-user points to a template. On DOMContentLoaded the script clones every template once into a .uhc-profile element and creates a bootstrap.Popover for each trigger with trigger: 'manual', html: true, placement: 'bottom', container set to the root and customClass: 'uhc-popover'. Because the profile element is shared, "Elena Novak" and "@elena" show the same card and the same follow state.

Hover opens the card after SHOW_DELAY (250 ms) and closes it HIDE_DELAY (200 ms) after the pointer leaves. Moving the pointer onto the card cancels the close, so the Follow button is easy to reach. The script attaches those listeners on inserted.bs.popover, because Bootstrap rebuilds the popover element on every show. Opening one card closes the others, and clicking outside closes all of them. The Follow button toggles aria-pressed, swaps its text and changes the follower count stored in data-uhc-count. A trigger with data-uhc-open opens its card on page load.

The portraits come from Unsplash; replace them with your users' own photos.

Customization

  • --uhc-card-width in .uhc-thread: the popover width, passed to Bootstrap through --bs-popover-max-width.
  • --uhc-accent in .uhc-thread: the violet used by the Follow button, mentions and the verified badge.
  • .uhc-cover--violet, .uhc-cover--teal, .uhc-cover--amber: gradient cover bands; add your own modifier per user.
  • SHOW_DELAY and HIDE_DELAY at the top of script.js: how fast cards open and close on hover.
  • placement: 'bottom' in script.js: change to 'top' or 'right'; Popper flips it automatically when space runs out.
  • Remove data-uhc-open from the first trigger to start with every card closed.
  • The Follow click handler in bindFollow(): replace the local count change with a fetch() to your follow endpoint.

Use cases

  • Comment threads: hovering an author name shows a photo, bio and follower counts without leaving the page
  • Team chats: @mentions open a profile card with a working follow button
  • Social feeds: readers preview a user card with cover band and stats before visiting the profile
  • Author lists: the same user card appears for the name and the mention, sharing one follow state

Accessibility

Triggers are real buttons with aria-haspopup="dialog" and an aria-expanded state, and Bootstrap links each one to its card with aria-describedby. The popover template uses role="dialog" with an aria-label such as "Profile of Elena Novak". Focus opens the card, and Enter or click moves focus to the Follow button. Escape closes the card and returns focus to the trigger, and tabbing out of the card closes it. Comment avatars use empty alt because the name is written next to them, while the card photo has a descriptive alt. Bootstrap's fade transition is turned off under prefers-reduced-motion.

Usage notes

Requires Bootstrap 5 with its JS bundle (Popper included) and Bootstrap Icons. Each .uhc-thread manages its own triggers and templates, so several threads can share one page.

User Hover Card Popover with Photo at a glance

Framework
Bootstrap 5
Code
HTML, CSS, JavaScript
JavaScript
Vanilla JavaScript, no jQuery
Dependencies
Bootstrap 5, Bootstrap Icons
Layout
Responsive, works on mobile
Category
Tooltips & Popovers
License
Free for personal and commercial use

Questions about this template

Can I use the User Hover Card Popover with Photo code for free?

Yes. You can copy or download the code and use it in personal and commercial projects, including client work. No sign-up is needed. Reselling it as part of a component library or template collection is not allowed; see the license.

How do I add it to my website?

Load Bootstrap 5 and Bootstrap Icons from a CDN (the links are under Requirements). Paste the HTML where the component should appear, add the CSS to your stylesheet and load the JavaScript before the closing </body> tag. Download HTML gives you a complete page with everything already linked.

Does it need jQuery or a JavaScript framework?

No. The script is plain vanilla JavaScript, so it works without jQuery, React or Vue. You can still use the markup inside those frameworks.

Does it work on mobile?

Yes. The layout adapts to small screens. Use the Mobile and Tablet buttons above the live demo to check it at phone and tablet width.

Requirements

Add these to your page (already included in the download):

  • <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
  • <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  • <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
User Hover Card Popover with Photo – Bootstrap 5 tooltips & popovers component screenshot
User Hover Card Popover with Photo · Bootstrap 5 Tooltips & Popovers

More Tooltips & Popovers

Pure CSS Tooltips – Pure CSS tooltips & popovers preview

Pure CSS Tooltips

JavaScript-free tooltips driven by data attributes, with top, right, bottom and left placement, arrows, color tones and hover or focus triggers.

Pure CSS Tooltips & Popovers
Popover with Rich Content – Bootstrap 5 tooltips & popovers preview

Popover with Rich Content

Bootstrap 5 popovers with HTML content: profile card with buttons, inline help with links and a delete confirmation, with focus handling.

Bootstrap 5 Tooltips & Popovers