Next Page »
  -  
Nov
07
2014
pure HTML5/CSS3 show/hide help box
Posted by ebal at 15:29:05 in blog, planet_ellak, planet_Sysadmin

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">
        <b><u>SOA</u></b><BR>
        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.
    </div>
</span>

 

and the CCS3 part:


.help {
    width: 5px;
}

.help:hover {
    width: 500px;
    height: 100px;
    background:#f7f7f7;
    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
  -