Clarity Strategic^TM

You've seen hovercards on social media platforms such as Twitter and Facebook, where if you mouseover your friend's name, a pop-up box shows some of the friend's info. What a useful tool, for ever so many reasons!

Here is a hovercard in absolute position on the page:

And here is a hovercard positioned relative to the text link:

Now here's the CSS for both, with a brief explanation:

/* Ron's Hovercards example - absolute position */

div#cards a { font: 10px Verdana, sans-serif; text-decoration: none; } 
div#cards a:hover { color: black; background: #cccccc; }
div#cards a span { display: none; }
div#cards a:hover span { display: block;
   position: absolute; top: 0px; left: 400px; 
   padding: 5px; margin: 10px; z-index: 100; width: 420px;
   color: black; background: white; border: 5px solid #ccccff;
   font: 10px Verdana, sans-serif; text-align: left; }
div#cards a:hover span img { height: 75px; }

/* Ron's Hovercards example - relative position */

div#cards1 a { font: 10px Verdana, sans-serif; text-decoration: none; } 
div#cards1 a:hover { color: black; background: #cccccc; }
div#cards1 a span { display: none; }
div#cards1 a:hover span { display: block;
   position: relative; top: -25px; left: 100px; // was position absolute, top auto
   padding: 5px; margin: 10px; z-index: 100; width: 420px;
   color: black; background: white; border: 5px solid #ccccff;
   font: 10px Verdana, sans-serif; text-align: left; }
div#cards1 a:hover span img { height: 75px; }

CSS must actually be something you have control over before you can make your own hovercards. I've done it on Wordpress and Joomla blogs, but I have to be able to edit the CSS to make changes. If (for instance) you have a Wordpress blog and Wordpress hosts it, you'll have to find a plugin to create these.

Now notice the major differences between the two examples:

• To maintain the hovercard near the text, you use the parameter top: auto. Otherwise, if you define the top position, the top of the hovercard goes to that place on the page. The top of the remote hovercard here goes to 0px - the top of the page.
• The left position of the nearby hovercard is ignored, because... I want it near the text. The remote hovercard will cover the blog name over if I don't push it off to the right.
• The remote hovercard has a z-index of 100. Its position has priority over the position of everything else. It just gets laid over the top of every other element. The nearby hovercard, which has a z-index of 0, is at the same position priority as everything around it. I've found that there's not that much need to muck around with z-index for this problem.

Everything else:

• I've chosen the font style, size, and color, and left no underscore for the link.
• The hovercard is set to display when you hover over the link (display: block) and not to display any other time (display: none).
• It's all in a little box, so I can choose the box size (I didn't fool with width here), border width and color, margin (within the blog post) and padding (inside the box itself), and stuff like that.

I'll say here that I didn't invent any of these design elements. All I did was throw the work of others together in a way that looks a little like the hovercards the social media platforms use. But here is a site that taught me a lot, in case you're a learner.

You can do all this yourself, but it requires you get in there and code just a little. If you're not comfortable with that, and you can't find a plugin, you may have to pay for someone to do it. This is, for instance, one of the things Clarity Strategic will include in a blog design, if you want it, at a reasonable price.