popover

gistfile1.js

addEvent = function(a, b, c) {
	if ("addEventListener" in window) { // !(IE)
		a.addEventListener(b, function(d){
			d.preventDefault();
			c.call(a);
		}, false)
	} else { // IE
		a.attachEvent("on" + b, function() {
		c.call(a);
		return false
		 })
	}
};

addEvent(button,
		"createTouch" in document ? "touchend" : "click",
		function() {
		if(myElement.className !== "popover"){
			myElement.className = "popover";
		} else {
			myElement.className = "popover opened"
		}
	})

popover.css

.popover{
	display:none;
	z-index:5;
	position:absolute;
	top:4.5em;
	left:.9em;
	border:1px solid #aaa;
	border-radius:.3em;
	background:#fff;
	box-shadow:0 .3em .7em rgba(0,0,0,.4);
}

.popover.opened {
	display:block;
	-webkit-animation:pop .2s ease-in-out;
	-moz-animation:pop .2s ease-in-out;
	animation:pop .2s ease-in-out;
}

.popover::after {
	content:"";
	position:absolute;
	top:-.5em;
	left:1.1em;
	border:.5em solid transparent;
	border-top-width:0;
	border-bottom-color:#fff;
}

.popover::before {
	content:"";
	position:absolute;
	top:-.65em;
	left:.95em;
	border:.65em solid transparent;
	border-top-width:0;
	border-bottom-color:#aaa;
}

@keyframes pop {
0 {
	display:block;
	opacity:0;
	transform:scale(.2);
}

100% {
	opacity:1;
	transform:scale(1);
}
}

@-webkit-keyframes pop {
0 {
	display:block;
	opacity:0;
	-webkit-transform:scale(.2);
}

100% {
	opacity:1;
	-webkit-transform:scale(1);
}
}

@-moz-keyframes pop {
0% {
	display:block;
	opacity:0;
	-moz-transform:scale(.2);
}

100% {
	opacity:1;
	-moz-transform:scale(1);
}
}