pure HTML5/CSS3 show/hide help box

Just because i am a sysadmin, doesn’t mean that i can’t hack some HTML5/CSS3 code!

Or even do a better job than some “web” devs or devops !!!

In fact, here is an example of a pure HTML5/CSS3 show/hide help box:


The below code displays a ? on the HTML page,
so that when hovering over it, shows a help box.


HTML5 part

<span class="help">
    <font color=blue>  ?  </font>
    <div class="hidden">
        Specifies authoritative information about a DNS zone, 
        including the primary name server, the email of the domain 
        administrator, the domain serial number, and several timers 
        relating to refreshing the zone.


and the CCS3 part:

.help {
    width: 5px;

.help:hover {
    width: 500px;
    height: 100px;
    position: fixed;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

.hidden {
    display: none;

.help:hover > .hidden {
    display: block;
    background: #f7f7f7;
    color: #000000;
    text-align: left;


I am sure, that this (perhaps) is not the perfect way - but it sure beats every JS code I ‘ve already read from web-devs.

Tag(s): HTML5, CSS3