show info on hover

Here I described how to show some descriptive text when clicking on a link.

But sometime you dont have enough space to insert this text directly in the window.
Here is a solution to show a popup window.

On Hover (plain css)

In the following example I created 2 lines that both will show a popup when hovered above: a plain text-div and a link.
This is done in pure CSS without javascript. Note that the element with class=popuptext is a child of the element with class=popup. This is so because the popup should be positioned relative to its parent.

In the css we need 3 elements:

• a definiton how popup should be positioned
• the style of the popup; visibility needs to be set to false
• a style that triggers when hovering above the element that changes the visibility

This setup lets the popup appear above the text/link. This might be odd because it hides the link, even if clicking on it is working. So,maybe you might want to modify .popuptext bottom or top to move the popup out of the way.

In passage add: <div class="popup">Hover over me. <span class="popuptext">A intern Simple Popup!</span></div>
<a href="javascript:void(0)" class="popup" id="Crowbar" onclick="">Hover over me. <span class="popuptext">Acrow bar of metal</span></a>

In css-stylesheet add: .popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.popup .popuptext {
visibility: hidden;
/*width: 160px;*/
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px;
position: absolute;
z-index: 1;
bottom: 0%;
left: 0%;
/*margin-left: -80px;*/
}
.popup:hover .popuptext {
visibility: visible;
}

On Click (css+js)

If you dont like the hover and instead want to use onClick, you might want the use classlist.toggle to change visibility:
<div class="popup" onclick='(function(){document.getElementById("myPopup").classList.toggle("show");}())'>Click me to toggle the popup!
<span class="popuptext" id="myPopup">A Simple Popup!</span></div>

You also have to add this additonal style:
.popup .show { visibility: visible; }