[Tutorial] Hovercard
+3
SarkZKalie
tylercole
Daemon
7 posters
[Tutorial] Hovercard
This code allows a hovercard to appear with user information by hovering over the nickname.
Image:
![EEE - [Tutorial] Hovercard Sem_ty11](https://i.servimg.com/u/f62/17/31/71/58/sem_ty11.png)
All you have to do is create a new JavaScript (The placement: All pages).

Image:
![EEE - [Tutorial] Hovercard Sem_ty11](https://i.servimg.com/u/f62/17/31/71/58/sem_ty11.png)
All you have to do is create a new JavaScript (The placement: All pages).
- Code:
/*
* Application: Hovercard
* Date: 04/06/2018
* Version: 2.004062018
* Copyright (c) 2018 Daemon <help.forumotion.com>
* This work is free. You can redistribute it and/or modify it
*/
(function() {
hovercard = {
initialize: function() {
$(function() {
hovercard.setupHovercard();
});
},
loading: "Loading...",
sendPm: "Send PM",
profile: "Profile",
posts: "Posts",
reputation: "Reputation",
join: "Join Date",
findContent: "Find Content",
pmImg: "https://i62.servimg.com/u/f62/18/12/37/46/mail0210.png",
profileImg: "https://i62.servimg.com/u/f62/18/12/37/46/user-111.png",
findImg: "https://i62.servimg.com/u/f62/18/12/37/46/search10.png",
hovercard: $("<div>", {
class: "hovercard"
}),
myCSS: '<style type="text/css">' +
'.hovercard {' +
' display: none;' +
' position: absolute;' +
' font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;' +
' margin-top: 8px;' +
' word-wrap: break-word;' +
' color: #555;' +
' font-size: 13px;' +
' padding: 4px;' +
' border-radius: 4px;' +
' -webkit-border-radius: 4px;' +
' -moz-border-radius: 4px;' +
' text-decoration: none' +
' z-index: 50;' +
' background-color: #fff;' +
' -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 3px 4px;' +
' -moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 3px 4px;' +
' box-shadow: rgba(0, 0, 0, 0.4) 0px 3px 4px;' +
'}' +
'.hovercard ul {' +
' margin-left: 100px;' +
' list-style: none;' +
' display: table;' +
' table-layout: auto;' +
' border-collapse: separate;' +
' border-spacing: 0;' +
'}' +
'.hovercard ul, .hovercard .hovercard-field {position: relative;}' +
'.hovercard li {padding: 2px 0;}' +
'.hovercard .hovercard-field {width: 100px;}' +
'.hovercard .hovercard-field, .hovercard .hovercard-value {display: table-cell;}' +
'.hovercard:before {' +
' width: 0;' +
' pointer-events: none;' +
' left: 0;' +
' right: 0;' +
' margin-left: auto;' +
' margin-right: auto;' +
' content: "";' +
' position: absolute;' +
' pointer-events: none !important;' +
' bottom: 100%;' +
' border-width: 10px;' +
' border-style: solid;' +
' border-color: transparent transparent #fff transparent;' +
'}' +
'.hovercard h3 {' +
' background-color: #353c41;' +
' border-radius: 4px 4px 0 0;' +
' -webkit-border-radius: 4px 4px 0 0;' +
' -moz-border-radius: 4px 4px 0 0;' +
' margin-bottom: 5px;' +
' padding: 13px;' +
' text-align: center;' +
'}' +
'.hovercard h3 a {' +
' font-size: 17px;' +
' text-decoration: none;' +
' color:#fff;' +
'}' +
'.hovercard h3 a:hover {color: #479fcf;}' +
'.hovercard .hover-photo {' +
' width: 68px;' +
' height: 68px;' +
' background-color: #FFFFFF;' +
' border: 1px solid #aaa;' +
' border-radius: 150px;' +
' -webkit-border-radius: 150px;' +
' -moz-border-radius: 150px;' +
' -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 3px;' +
' -moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 3px;' +
' box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 3px;' +
' float: left;' +
' padding: 2px;' +
'}' +
'.hovercard .hovercard-footer {' +
' background-color: #ddd;' +
' border-radius: 0 0 4px 4px;' +
' -webkit-border-radius: 0 0 4px 4px;' +
' -moz-border-radius: 0 0 4px 4px;' +
' margin-top: 5px;' +
' padding: 13px;' +
' text-align: right;' +
'}' +
'.hovercard .hovercard-button {' +
' background-color: #EEEEEE;' +
' background-image: linear-gradient(#F5F6F6, #E4E4E3);' +
' border-color: #999999 #999999 #888888;' +
' border-style: solid;' +
' border-width: 1px;' +
' color: #555;' +
' text-decoration: none;' +
' margin: 5px;' +
' box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 0 #FFFFFF inset;' +
' font: bold 11px tahoma, verdana, arial, sans-serif;' +
' padding: 5px 6px 5px 8px;' +
' text-align: center;' +
'}' +
'.hovercard .hovercard-button:hover {color: #444;border-color: #888888 #888888 #777777;}' +
'.hovercard .hovercard-button img {vertical-align: bottom;}' +
'</style>',
hovercardWidth: 280, // Set hovercard width (px)
openingInterval: 400, // 0.4 seconds to open the hovercard
closingInterval: 400, // 0.4 seconds to close the hovercard
content: function(user, url, id, photo, msg, rep, reg) {
hovercard.hovercard.html(
'<div class="hovercard-inner">' +
' <h3>' +
' <img src="' + photo + '" class="hover-photo" alt>' +
' <a href="/profile?mode=viewprofile&u=' + user + '">' + user + '</a>' +
' </h3>' +
' <ul>' +
' <li>' +
' <span class="hovercard-field"><strong>' + hovercard.posts + '</strong></span>' +
' <span class="hovercard-value">' + msg + '</span>' +
' </li>' +
' <li>' +
' <span class="hovercard-field"><strong>' + hovercard.reputation + '</strong></span>' +
' <span class="hovercard-value">' + rep + '</span>' +
' </li>' +
' <li>' +
' <span class="hovercard-field"><strong>' + hovercard.join + '</strong></span>' +
' <span class="hovercard-value">' + reg + '</span>' +
' </li>' +
' </ul>' +
'</div>' +
'<div class="hovercard-footer">' +
' <a href="/privmsg?mode=post&u=' + id + '" class="hovercard-button" title="' + hovercard.sendPm + '">' +
' <img src="' + hovercard.pmImg + '">' +
' </a>' +
' <a href="/profile?mode=viewprofile&u=' + user + '" class="hovercard-button" title="' + hovercard.profile + '">' +
' <img src="' + hovercard.profileImg + '">' +
' </a>' +
' <a href="/spa/' + user + '" class="hovercard-button" title="' + hovercard.findContent + '">' +
' <img src="' + hovercard.findImg + '">' +
' </a>' +
'</div>'
);
},
fadeOutHovercard: function() {
timeout = setTimeout(function() {
hovercard.hovercard.fadeOut(hovercard.closingInterval, function() {
$(this).html(hovercard.loading);
});
}, 1500);
},
setupHovercard: function() {
// Inserting CSS before page body
$(hovercard.myCSS).insertBefore("body");
// Inserting element hovercard append to page body
$(hovercard.hovercard).appendTo("body");
// Set hovercard width
$(hovercard.hovercard).width(hovercard.hovercardWidth);
var timeout,
JSONuser = [];
$(document).on("mouseenter", "a[href^='/u']", function(e) {
if ($(this).attr("href").split(/[\d,]+/)[1]) return; // If it is user profile
if (timeout) clearTimeout(timeout); // Clear time out
// Hovercard position
var pos = {
"top": $(this).offset().top + $(this).outerHeight(),
"left": $(this).offset().left - (hovercard.hovercard.width() / 2) + ($(this).outerWidth() / 2)
};
// Positioning and displaying hovercard
hovercard.hovercard.html(hovercard.loading).css(pos).fadeIn(hovercard.openingInterval);
var urlUser = $(this).attr("href"),
idUser = urlUser.match(/\d+/).toString(),
stored = sessionStorage.getItem("hovercard-" + idUser);
if (!stored) {
$.ajax({
type: "GET",
url: urlUser + "?change_version=punbb",
success: function(data) {
var user = $(data).filter("title").text().split("- ")[1],
photoUser = $("#profile-advanced-right .module:first .main-content img", data).attr("src"),
msg = $("#field_id-6 dd", data).text(),
rep = $("#field_id-14 dd", data).text(),
reg = $("#field_id-4 dd", data).text();
JSONuser = [{
name: user,
url: urlUser,
photo: photoUser,
id: idUser,
message: msg,
reputation: rep,
register: reg
}];
var dataAsJsonString = JSON.stringify(JSONuser);
sessionStorage.setItem("hovercard-" + idUser, dataAsJsonString);
hovercard.content(user, urlUser, idUser, photoUser, msg, rep, reg);
},
error: function(jqXHR, textStatus, errorThrown) {
if (jqXHR.status == 500) {
console.log("Internal error: " + jqXHR.responseText);
} else {
console.log("Unexpected error.");
}
}
});
return;
}
JSONuser = $.parseJSON(stored);
$.each(JSONuser, function(i, val) {
if (val.id == idUser) hovercard.content(val.name, val.url, val.id, val.photo, val.message, val.reputation, val.register);
});
}).on("mouseleave", function(e) {
hovercard.fadeOutHovercard();
});
hovercard.hovercard.on("mouseenter", function(e) {
if (timeout) clearTimeout(timeout); // Clear time out
}).on("mouseleave", function(e) {
hovercard.fadeOutHovercard();
});
}
};
hovercard.initialize()
})();

Last edited by Daemon on June 16th 2018, 5:29 pm; edited 13 times in total
Daemon- Forumember
- Posts : 104
Reputation : 90
Language : Português
yonev likes this post
Re: [Tutorial] Hovercard
Cool, but what do u mean by, "With an investment on every page?"
tylercole- Forumember
- Posts : 304
Reputation : 17
Language : english
Re: [Tutorial] Hovercard
^in all the pages 

SarkZKalie- Support Moderator
-
Posts : 1344
Reputation : 214
Language : English
Re: [Tutorial] Hovercard
That's cool, any idea how to make the headers of these hover cards a certain color?
tylercole- Forumember
- Posts : 304
Reputation : 17
Language : english
Re: [Tutorial] Hovercard
You can change the header color in the following part (#eee).
- Code:
'.hovercard h3 {' +
' background-color: #eee;' +
' border-bottom: 1px dashed #aaa;' +
' margin: 0;' +
' margin-bottom: 5px;' +
' padding: 3px;' +
' text-align: center;' +
'}' +
Daemon- Forumember
- Posts : 104
Reputation : 90
Language : Português
Re: [Tutorial] Hovercard
Is this a modified version of the pop up feature that we already have?

![EEE - [Tutorial] Hovercard Slgray10](https://i.servimg.com/u/f28/11/40/02/06/slgray10.png)
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray- Administrator
-
Posts : 50246
Reputation : 3466
Language : English
Location : United States
Re: [Tutorial] Hovercard
The default popup applies to the marked names, with the @, correct?
This code I made, applies to any nickname that has a user link. Just mouse over.
This code I made, applies to any nickname that has a user link. Just mouse over.
Daemon- Forumember
- Posts : 104
Reputation : 90
Language : Português
Re: [Tutorial] Hovercard
Ok. Thanks for sharing it.

![EEE - [Tutorial] Hovercard Slgray10](https://i.servimg.com/u/f28/11/40/02/06/slgray10.png)
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray- Administrator
-
Posts : 50246
Reputation : 3466
Language : English
Location : United States
Re: [Tutorial] Hovercard
Yeah, super cool. Just added it to my forum. Appreciate it.
tylercole- Forumember
- Posts : 304
Reputation : 17
Language : english
Re: [Tutorial] Hovercard
Well done dude! 

YoshiGM- Active Poster
-
Posts : 1223
Reputation : 133
Language : Spanish & English
Location : Mexico
Re: [Tutorial] Hovercard
Updated to 1.1 

Daemon- Forumember
- Posts : 104
Reputation : 90
Language : Português
Re: [Tutorial] Hovercard
Awesome! But if you change the value on the profile of the user.. it does not update in the pop up until you have closed (entirely) and have reset the browser. Is possible to change it? And do it update after x amount of minutes or something?
TY!
TY!
Str0ng- Forumember
- Posts : 55
Reputation : 7
Language : Spanish
Re: [Tutorial] Hovercard
I did this in order to avoid having a large number of requests, saving the content with sessionStorage to avoid loading multiple times.
Daemon- Forumember
- Posts : 104
Reputation : 90
Language : Português
Re: [Tutorial] Hovercard
I see.. and why not, store them in the forum cookies? Instead on the browser? So to see the updated content only will be needed to clean the forum cookies (and not need to close all the tabs of the browser etc..)
Str0ng- Forumember
- Posts : 55
Reputation : 7
Language : Spanish
Re: [Tutorial] Hovercard
Hello,
I get trouble that when I move cursor over nickname in near right bound of window, the panel dont show full detail.
I get trouble that when I move cursor over nickname in near right bound of window, the panel dont show full detail.
jackauk- New Member
- Posts : 2
Reputation : 2
Language : English, Vietnamese
Re: [Tutorial] Hovercard
Any changelog please. Thank you
And if possible, could you provide the old versions before? I think we can learn more from you. Cuz knowledge is power hehe

SarkZKalie- Support Moderator
-
Posts : 1344
Reputation : 214
Language : English
Re: [Tutorial] Hovercard
I did not save on githubSarkZKalie wrote:Any changelog please. Thank youAnd if possible, could you provide the old versions before? I think we can learn more from you. Cuz knowledge is power hehe

Daemon- Forumember
- Posts : 104
Reputation : 90
Language : Português

» Hovercard was duplicated on hover
» Requesting Loading Screen Video tutorial or Tutorial
» BIG 2010 WINTER CONTEST : IPOD NANO TO WIN!
» tutorial how to get it
» Tutorial?
» Requesting Loading Screen Video tutorial or Tutorial
» BIG 2010 WINTER CONTEST : IPOD NANO TO WIN!
» tutorial how to get it
» Tutorial?
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum