JSFiddle - React, Tailwind, and code Playground
HTML
<div>Class added and removed here.</div>
<div>Class toggled here</div>
<div class="popup" onclick="myPopFunction(this)" id="myPop1">
<img src="Images/Slightly%20Smile.png" width="15">
<span class="popupimage" id="myPop1a">
<div style="position: relative;">
<img src="Images/dilbert_agile_programming.gif">
<img src="Images/Cross%20hair%20white%20border%20small.png" class="dropshadow" width="25">
</div>
</span>
</div>
CSS
.dropshadow {
border-radius:50%;
box-shadow: 5px 5px 3px #888888;
position:absolute;
top:-10px;
right:-10px;
}
.popup {
position: relative;
display: inline-block;
cursor:pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.popup .popupimage {
visibility: hidden;
position: absolute;
z-index: 1;
top:100%;
left: -320px;
}
.popup .showpop {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
@-webkit-keyframes fadeIn {
from {opacity: 0;} to {opacity: 1;}
}
@keyframes fadeIn {
from {opacity: 0;} to {opacity:1 ;}
}
JavaScript
function classList (el) {
function classMatch (className) {
return new RegExp("(^\\s*|\\s+)" + className + "(\\s*$|\\s+)");
}
if (el.hasOwnProperty('classList')) {
return el.classList;
}
return {
add : function (className) {
if (!this.contains(className)) {
el.className += ' ' + className;
}
},
remove : function (className) {
el.className = el.className.replace(classMatch(className), ' ');
},
contains : function (className) {
return classMatch(className).test(el.className);
},
toggle : function (className) {
if (this.contains(className)) {
this.remove(className);
} else {
this.add(className);
}
}
};
}
function myPopFunction(elem) {
var popup = document.getElementById(elem.id+"a");
classList(popup).toggle("showpop");
}