I'd like to have the caption of each image show up as a tooltip that follows the mouse on mouseover. I got this script working in another app but I can't get it to integrate with laytheme/wordpress.
Here's what I have so far:
<script>
var tooltip = document.querySelectorAll('.caption');
document.addEventListener('mousemove', fn, false);
function fn(e) {
for (var i=tooltip.length; i--;) {
tooltip[i].style.left = e.pageX + 'px';
tooltip[i].style.top = e.pageY + 'px';
}
}
</script>
AND this in the CSS:
.img:hover .caption {
display: block;
}
.caption {
display: none;
font-family: Slantbeta5;
font-size: 30px;
color: #17242c;
padding: 10px;
position: absolute;
z-index: 1000;
left: 50%;
-webkit-transform: translateX(-50%);
}
The page is http://extra-vitamins.com/play
Thanks!