Click anywhere to close this dialog


Great is the art of beginning, but greater is the art of ending
Henry Wadsworth Longfellow

I announce that I cease all development and activity in the programming universe indefinitely. My career has reached the turning point I was not expecting for at least another year, leaving me highly off guard and without laid-out plans for this hobby's continuity. I have begun a 5-year residency program in Neurosurgery which is clearly not compatible, time-wise, with programming.

I gave in all my passion for developing, and you gave me back your loyalty and trust, even when I did not deserve that much. Now it is the time for payback. I release all my present and past work as Open Source software, in the hope some talented developer will continue maintaining and expanding my vision of a modern, sleek forum software. The intrinsic flexibility of MyBB is the true hidden gem of an otherwise outdated codebase; I do hope the project can continue and be updated complying to the latest coding standards.

I hereby thank Euan, kawaii, andrewjs18, Ben, Matt, Omar G., effone, Eric J., Devilshakerz, Wildcard, JordanMussi and all the other team members I have had the opportunity to work with when I was a MyBB team member. I thank Tomm M, my mentor, who inspired me to pick up coding with his piece-of-art plugins. And finally, I thank all of you MyBBoost subscribers who have helped me getting through my toughest university years economically.

Yours sincerely, Filippo

Hovercards 1.3

25 Feb 2017 Edited
Hovercards is a plugin which shows a delightful preview of your users when they hover on usernames around your board. You can customize Hovercards as you wish, fine-tuning what users data to show inside cards and their visual aspect as well.

[Image: S6lj3yD.gif]

Minimum requirements

PHP 5.4
MyBB 1.8.0
664 chmod permissions on inc/functions.php

Main features

Hovercards is not a complicated plugin. As such, it does not come with many hardcoded options, but it does what it's supposed to do: display cards on hover.


You decide what data to include in a card: once a data point becomes available, you can reference it in Hovercards' unique template, which is then packed and built upon every single hover on an username. Hovercards adds 1 stylesheet you can play around with to customize the visual aspect of the card. A minimal style is included by default.

You can also use JavaScript conditionals to adapt each data point's display. For example, you might want to display a different label when an user hasn't posted yet. You can use the buildTemplateCallback(html, user) function to manipulate the template accounting for each user's values every time it is displayed. The base example is included in the hovercards_script template.

Adaptive colors

Every card can hold an unique background color which is chosen upon the dominant one from the user's avatar. Text color is adjusted to be readable accounting for the background contrast. This is available as an option. Adaptive colors uses a nasty technique which absolutely demands the image data; cross-site scripting blocks is circumvented by using Google's public image proxy, which helps gathering the image data.

All-in-one query

Hovercards queries the database just the first time you hover on a username, gathering all the users available in the page with one query. This adds an extra layer of trust when it comes to properly assign an user's data to the respective target on screen, and it also saves resources by avoiding too many queries over time.


Upload the files maintaining the same folder structure as they come in the package and click the button Install & activate within your board's plugin list.


Hovercards adds 4 settings.

Adaptive colors has already been explained above. If you disable it, you can manually choose and add a default background color for all cards in HEX format.

Fields to use lets you select the available data points. The more data points you will select, the more intense and slow the query will be (although you shouldn't notice the difference most of the times). A FIELD is then available within Hovercards' template with the following, simple syntax: {FIELD}. For example, if you activate the field "username", you will be able to use {username} into Hovercards' template and it will be replaced with the user's formatted username when watching his card.

Card positioning lets you decide the orientation of cards relative to their attached object out of 9 possible vertical/horizontal placements. The default orientation is "bottom left".

Templates and stylesheets

Hovercards adds a CSS file named hovercards.css to every theme of your board. You can customize the card's appearance by editing the stylesheet's CSS rules. It also adds 2 templates which you can customize to change both the appearance and data points to show in a single card, as explained above.

Reporting issues

If you encounter an issue, feel free to open a new thread in this forum with detailed instructions on how to reproduce your issue. Suggestions and feature requests are appreciated as well.


Hovercards is available for free. WARNING SIGN Support is discontinued due to my departure from programming. Read more why here.

This project is licensed under


A simple license with little to no use restrictions, except for author's crediting. Read the provided LICENSE file for more informations.


Commercial use
Private use


License notice
Copyright notice
Filename Size Downloads
39.83 KB 348
Hefty, Enes Palit, lavaskins And 13 others like this post
Harry K. 7 Apr 2018 Edited
It's not something I personally want on my forum, just something I noticed, does it work on here when you set the Card positioning setting to "Bottom Left" or another left? it stays positioned to the right for me.

It's fine for me though as I want it positioned to the center and that works. I must say, thanks for the plugin Shade! It's absolutely brilliant and really simple to customise, I would definitely recommend this to anyone! Here's what mine looks like now:
[Image: NMIgTKS.png]

Edit, just a note Shade, I don't think Quick Edit is working on this site.
Brody likes this post
Shade 8 Apr 2018
That looks beautiful! Great job! The left/right positioning should work as long as the card lays within its scrollparent boundaries – usually the entire window pane. If it goes out of boundaries, it gets repositioned automatically no matter how the setting is set to. Also, thanks for reporting that – it's a bug with Endless which I need to sort out.
Harry K. 8 Apr 2018
Yeah I thought that would be how it worked, but it seems not to be working on the left for me at all, even when there is enough room. I'll PM you a link to my forum, I've currently set it to "Bottom Left", however they are showing on the bottom right. If you want a temp admin account to investigate let me know.
Shade 8 Apr 2018 Edited
I should have mentioned it before – the positioning refers to the link the card is attached to, so "Bottom left" displays it to the right of the link, "Bottom right" displays it to the left.

Looks like it's working like it should on your site too.
Harry K. 8 Apr 2018
Ok, check it now. Setting is set to "Bottom Right", still same positioning.

Also, middle right and middle left both have the same positioning, which sits ontop of the link.
Shade 8 Apr 2018
Indeed, something's not working as it should. I will investigate.
Harry K. likes this post
Brody 29 Oct 2018
For anyone reading this, strongly recommend reading the installation instructions first (as you typically should anyway), but the core edit is important.

This plugin is another great example of Shade's premium work! Keep up the great work, it looks great on my forums!
ProX 6 Aug 2019
@Shade any ETA when this is expected to work with recent versions of Mybb?
Shade 6 Aug 2019
Most probably today or tomorrow.
Shade 6 Aug 2019


This is a bugfix release.

BUG added MyBB 1.8.20+ and jQuery 3 compatibility by standardizing the JSON response
SQUARED NEW the required core edit is now handled automatically by the plugin upon installing

Upgrading to version 1.1

Make a backup of your files before upgrading.

If you have installed version 1.0 and you have the core edit already in place, it is advisable to revert the edit before uploading the new version.

KEYCAP 1 upload the new version, overwriting the old one
KEYCAP 2 check if the core edit is applied by looking under Hovercards' row in the plugins section. If the core edit is missing, apply it by clicking on the respective button