After creating a code snippet for image tooltips on text hover, I encountered an issue on my website where the bottom of the page expanded to accommodate the images. Is there a simple way to align the cursor at the bottom of the image when scrolling to the bottom of the page?
this.imageTooltip = function() {
/* CONFIG */
xOffset = 10;
yOffset = 20;
// set the distance of the tooltip from the cursor
/* END CONFIG */
jQuery("a.tooltip").hover(
function(e) {
this.t = this.title;
this.title = "";
jQuery("body").append("<p id='tooltip'>" + this.t + "</p>");
jQuery("#tooltip")
.css("top", e.pageY - xOffset + "px")
.css("left", e.pageX + yOffset + "px")
.fadeIn("fast");
},
function() {
this.title = this.t;
jQuery("#tooltip").remove();
}
);
jQuery("a.tooltip").mousemove(function(e) {
jQuery("#tooltip")
.css("top", e.pageY - xOffset + "px")
.css("left", e.pageX + yOffset + "px");
});
};
// initialize the script on page load
jQuery(document).ready(function() {
imageTooltip();
});#tooltip {
position: absolute;
background: transparent;
color: #333;
}
#tooltip img {
height: 51.5vh;
width: auto;
}<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<a href="#" class="tooltip" title="<img src='https://s.aolcdn.com/hss/storage/midas/2ff6b684c6195e0bf24e5b5d35e85a4a/205063011/Commodus.jpeg'/>">SAMPLE TEXT</a>
<br>
... (additional sample text links with image tooltips)