Make a popup box with CSS and Javascript

Like tooltip, but you can put anything inside popup box such as menu list, description, image, profile...
Unlike tooltip, with popup box, you have to click to toggle show its contents.

Step 1: Add HTML code below into your HTML file, put into your position that you want to show popup box.

When the user click on the button "popup-menu", the popup box will be open and click again to close it.

Step 2: Add CSS code to style your popup box:

 .popup-menu {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
 text-align: center;
 width: 160px;
  background: #eee;
  border-radius: 5px;
  padding:5px 10px;
  border: 1px solid #ccc;

/* css for popup content */
.popup-menu .popup-content {
  visibility: hidden;
  width: 200px;
  background-color: rgba(0,0,0,0.6);
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 8px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -108px;

/* css for popup arrow */
.popup-menu .popup-content::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: rgba(0,0,0,0.6) transparent transparent transparent;

/* Toggle this class - hide and show the popup */
.popup-menu .show {
  visibility: visible;
  -webkit-animation: fadeIn 0.5s;
  animation: fadeIn 0.5s;

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}

Step 3: Add Javascript code below

    function onShowHidePopup() {
        const popup = document.getElementById("myPopup");

© 2019 4codev

Created with love by Sil.