title: Make tooltip image align different to the cursor at bottom of page
body: <p>I wrote/edited this piece of code to have an image tooltip when hovering on a piece of text. When implementing it in my website I noticed that the website enlarges itself at the bottom to make the image fit.</p>
  
  <p>Is there an easy way to make the cursor align to the bottom of the image when scrolled down to the bottom of the page(?)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>this.tooltip = function() {
    /* CONFIG */
  
    xOffset = 10;
    yOffset = 20;
  
    // determine popup's distance from the cursor
    /* END CONFIG */
  
    jQuery("a.tooltip").hover(
      function(e) {
        this.t = this.title;
        this.title = "";
        jQuery("body").append("&lt;p id='tooltip'&gt;" + this.t + "&lt;/p&gt;");
        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");
    });
  };
  
  // starting the script on page load
  jQuery(document).ready(function() {
    tooltip();
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#tooltip {
    position: absolute;
    background: transparent;
    color: #333;
  }
  
  #tooltip img {
    height: 51.5vh;
    width: auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;a href="#" class="tooltip" title="&lt;img src='https://s.aolcdn.com/hss/storage/midas/2ff6b684c6195e0bf24e5b5d35e85a4a/205063011/Commodus.jpeg'/&gt;"&gt;TEXTS&lt;/a&gt;
  &lt;br&gt;
  &lt;a href="#" class="tooltip" title="&lt;img src='http://justsomething.co/wp-content/uploads/2013/11/guns-replaced-thumbs-up-18.jpg'/&gt;"&gt;TEXTS&lt;/a&gt;&lt;br&gt;
  &lt;a href="#" class="tooltip" title="&lt;img src='https://s.aolcdn.com/hss/storage/midas/2ff6b684c6195e0bf24e5b5d35e85a4a/205063011/Commodus.jpeg'/&gt;"&gt;TEXTS&lt;/a&gt;
  &lt;br&gt;
  &lt;a href="#" class="tooltip" title="&lt;img src='http://justsomething.co/wp-content/uploads/2013/11/guns-replaced-thumbs-up-18.jpg'/&gt;"&gt;TEXTS&lt;/a&gt;&lt;br&gt;
  &lt;a href="#" class="tooltip" title="&lt;img src='https://s.aolcdn.com/hss/storage/midas/2ff6b684c6195e0bf24e5b5d35e85a4a/205063011/Commodus.jpeg'/&gt;"&gt;TEXTS&lt;/a&gt;
  &lt;br&gt;
  &lt;a href="#" class="tooltip" title="&lt;img src='http://justsomething.co/wp-content/uploads/2013/11/guns-replaced-thumbs-up-18.jpg'/&gt;"&gt;TEXTS&lt;/a&gt;&lt;br&gt;
  &lt;a href="#" class="tooltip" title="&lt;img src='https://s.aolcdn.com/hss/storage/midas/2ff6b684c6195e0bf24e5b5d35e85a4a/205063011/Commodus.jpeg'/&gt;"&gt;TEXTS&lt;/a&gt;
  &lt;br&gt;
  &lt;a href="#" class="tooltip" title="&lt;img src='http://justsomething.co/wp-content/uploads/2013/11/guns-replaced-thumbs-up-18.jpg'/&gt;"&gt;TEXTS&lt;/a&gt;&lt;br&gt;
  &lt;a href="#" class="tooltip" title="&lt;img src='https://s.aolcdn.com/hss/storage/midas/2ff6b684c6195e0bf24e5b5d35e85a4a/205063011/Commodus.jpeg'/&gt;"&gt;TEXTS&lt;/a&gt;
  &lt;br&gt;
  &lt;a href="#" class="tooltip" title="&lt;img src='http://justsomething.co/wp-content/uploads/2013/11/guns-replaced-thumbs-up-18.jpg'/&gt;"&gt;TEXTS&lt;/a&gt;&lt;br&gt;
  &lt;a href="#" class="tooltip" title="&lt;img src='https://s.aolcdn.com/hss/storage/midas/2ff6b684c6195e0bf24e5b5d35e85a4a/205063011/Commodus.jpeg'/&gt;"&gt;TEXTS&lt;/a&gt;
  &lt;br&gt;
  &lt;a href="#" class="tooltip" title="&lt;img src='http://justsomething.co/wp-content/uploads/2013/11/guns-replaced-thumbs-up-18.jpg'/&gt;"&gt;TEXTS&lt;/a&gt;&lt;br&gt;
  &lt;a href="#" class="tooltip" title="&lt;img src='https://s.aolcdn.com/hss/storage/midas/2ff6b684c6195e0bf24e5b5d35e85a4a/205063011/Commodus.jpeg'/&gt;"&gt;TEXTS&lt;/a&gt;
  &lt;br&gt;
  &lt;a href="#" class="tooltip" title="&lt;img src='http://justsomething.co/wp-content/uploads/2013/11/guns-replaced-thumbs-up-18.jpg'/&gt;"&gt;TEXTS&lt;/a&gt;&lt;br&gt;
  &lt;a href="#" class="tooltip" title="&lt;img src='https://s.aolcdn.com/hss/storage/midas/2ff6b684c6195e0bf24e5b5d35e85a4a/205063011/Commodus.jpeg'/&gt;"&gt;TEXTS&lt;/a&gt;
  &lt;br&gt;
  &lt;a href="#" class="tooltip" title="&lt;img src='http://justsomething.co/wp-content/uploads/2013/11/guns-replaced-thumbs-up-18.jpg'/&gt;"&gt;TEXTS&lt;/a&gt;&lt;br&gt;</code></pre>
  </div>
  </div>
  </p>