ツールチップのイメージをページ下部のカーソルと異なるようにします

Question

テキストの一部をホバリングするときにこのツールを使用して画像のツールチップを作成/編集しました。私のウェブサイトでそれを実装するとき、私は、ウェブサイトが画像を収めるために底面を拡大することに気づいた。

ページの一番下までスクロールしたときにカーソルが画像の下に合わせるようにする簡単な方法があります（？）

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("<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"); 
 
    }); 
 
}; 
 

 
// starting the script on page load 
 
jQuery(document).ready(function() { 
 
    tooltip(); 
 
});

#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'/>">TEXTS</a> 
 
<br> 
 
<a href="#" class="tooltip" title="<img src='http://justsomething.co/wp-content/uploads/2013/11/guns-replaced-thumbs-up-18.jpg'/>">TEXTS</a><br> 
 
<a href="#" class="tooltip" title="<img src='https://s.aolcdn.com/hss/storage/midas/2ff6b684c6195e0bf24e5b5d35e85a4a/205063011/Commodus.jpeg'/>">TEXTS</a> 
 
<br> 
 
<a href="#" class="tooltip" title="<img src='http://justsomething.co/wp-content/uploads/2013/11/guns-replaced-thumbs-up-18.jpg'/>">TEXTS</a><br> 
 
<a href="#" class="tooltip" title="<img src='https://s.aolcdn.com/hss/storage/midas/2ff6b684c6195e0bf24e5b5d35e85a4a/205063011/Commodus.jpeg'/>">TEXTS</a> 
 
<br> 
 
<a href="#" class="tooltip" title="<img src='http://justsomething.co/wp-content/uploads/2013/11/guns-replaced-thumbs-up-18.jpg'/>">TEXTS</a><br> 
 
<a href="#" class="tooltip" title="<img src='https://s.aolcdn.com/hss/storage/midas/2ff6b684c6195e0bf24e5b5d35e85a4a/205063011/Commodus.jpeg'/>">TEXTS</a> 
 
<br> 
 
<a href="#" class="tooltip" title="<img src='http://justsomething.co/wp-content/uploads/2013/11/guns-replaced-thumbs-up-18.jpg'/>">TEXTS</a><br> 
 
<a href="#" class="tooltip" title="<img src='https://s.aolcdn.com/hss/storage/midas/2ff6b684c6195e0bf24e5b5d35e85a4a/205063011/Commodus.jpeg'/>">TEXTS</a> 
 
<br> 
 
<a href="#" class="tooltip" title="<img src='http://justsomething.co/wp-content/uploads/2013/11/guns-replaced-thumbs-up-18.jpg'/>">TEXTS</a><br> 
 
<a href="#" class="tooltip" title="<img src='https://s.aolcdn.com/hss/storage/midas/2ff6b684c6195e0bf24e5b5d35e85a4a/205063011/Commodus.jpeg'/>">TEXTS</a> 
 
<br> 
 
<a href="#" class="tooltip" title="<img src='http://justsomething.co/wp-content/uploads/2013/11/guns-replaced-thumbs-up-18.jpg'/>">TEXTS</a><br> 
 
<a href="#" class="tooltip" title="<img src='https://s.aolcdn.com/hss/storage/midas/2ff6b684c6195e0bf24e5b5d35e85a4a/205063011/Commodus.jpeg'/>">TEXTS</a> 
 
<br> 
 
<a href="#" class="tooltip" title="<img src='http://justsomething.co/wp-content/uploads/2013/11/guns-replaced-thumbs-up-18.jpg'/>">TEXTS</a><br> 
 
<a href="#" class="tooltip" title="<img src='https://s.aolcdn.com/hss/storage/midas/2ff6b684c6195e0bf24e5b5d35e85a4a/205063011/Commodus.jpeg'/>">TEXTS</a> 
 
<br> 
 
<a href="#" class="tooltip" title="<img src='http://justsomething.co/wp-content/uploads/2013/11/guns-replaced-thumbs-up-18.jpg'/>">TEXTS</a><br>

Answer 1

場合は、確認することができますツールヒントは、ツールヒントの高さを使用してscrollBottomを超え、それに基づいてオフセットを修正します。これは動作しているようです：あなたは、ドキュメントの高さとoffset()を使用してツールチップの位置を確認する必要があります

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("<p id='tooltip'>" + this.t + "</p>"); 
 
     var scrollBottom = $(window).scrollTop() + $(window).height(); 
 
     if(scrollBottom <= (e.pageY + $('#tooltip').height())) 
 
      xOffset = $('#tooltip').height(); 
 
     else 
 
      xOffset = 10; 
 
     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(); 
 
});

#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'/>">TEXTS</a> 
 
<br> 
 
<a href="#" class="tooltip" title="<img src='http://justsomething.co/wp-content/uploads/2013/11/guns-replaced-thumbs-up-18.jpg'/>">TEXTS</a><br> 
 
<a href="#" class="tooltip" title="<img src='https://s.aolcdn.com/hss/storage/midas/2ff6b684c6195e0bf24e5b5d35e85a4a/205063011/Commodus.jpeg'/>">TEXTS</a> 
 
<br> 
 
<a href="#" class="tooltip" title="<img src='http://justsomething.co/wp-content/uploads/2013/11/guns-replaced-thumbs-up-18.jpg'/>">TEXTS</a><br> 
 
<a href="#" class="tooltip" title="<img src='https://s.aolcdn.com/hss/storage/midas/2ff6b684c6195e0bf24e5b5d35e85a4a/205063011/Commodus.jpeg'/>">TEXTS</a> 
 
<br> 
 
<a href="#" class="tooltip" title="<img src='http://justsomething.co/wp-content/uploads/2013/11/guns-replaced-thumbs-up-18.jpg'/>">TEXTS</a><br> 
 
<a href="#" class="tooltip" title="<img src='https://s.aolcdn.com/hss/storage/midas/2ff6b684c6195e0bf24e5b5d35e85a4a/205063011/Commodus.jpeg'/>">TEXTS</a> 
 
<br> 
 
<a href="#" class="tooltip" title="<img src='http://justsomething.co/wp-content/uploads/2013/11/guns-replaced-thumbs-up-18.jpg'/>">TEXTS</a><br> 
 
<a href="#" class="tooltip" title="<img src='https://s.aolcdn.com/hss/storage/midas/2ff6b684c6195e0bf24e5b5d35e85a4a/205063011/Commodus.jpeg'/>">TEXTS</a> 
 
<br> 
 
<a href="#" class="tooltip" title="<img src='http://justsomething.co/wp-content/uploads/2013/11/guns-replaced-thumbs-up-18.jpg'/>">TEXTS</a><br> 
 
<a href="#" class="tooltip" title="<img src='https://s.aolcdn.com/hss/storage/midas/2ff6b684c6195e0bf24e5b5d35e85a4a/205063011/Commodus.jpeg'/>">TEXTS</a> 
 
<br> 
 
<a href="#" class="tooltip" title="<img src='http://justsomething.co/wp-content/uploads/2013/11/guns-replaced-thumbs-up-18.jpg'/>">TEXTS</a><br> 
 
<a href="#" class="tooltip" title="<img src='https://s.aolcdn.com/hss/storage/midas/2ff6b684c6195e0bf24e5b5d35e85a4a/205063011/Commodus.jpeg'/>">TEXTS</a> 
 
<br> 
 
<a href="#" class="tooltip" title="<img src='http://justsomething.co/wp-content/uploads/2013/11/guns-replaced-thumbs-up-18.jpg'/>">TEXTS</a><br> 
 
<a href="#" class="tooltip" title="<img src='https://s.aolcdn.com/hss/storage/midas/2ff6b684c6195e0bf24e5b5d35e85a4a/205063011/Commodus.jpeg'/>">TEXTS</a> 
 
<br> 
 
<a href="#" class="tooltip" title="<img src='http://justsomething.co/wp-content/uploads/2013/11/guns-replaced-thumbs-up-18.jpg'/>">TEXTS</a><br>

Answer 2

。ツールチップがドキュメントの高さの外側にある場合は、ツールチップの位置を変更します。
など。

if ((e.pageY - xOffset + tooltip image height) > document height) 
{ 
    jQuery("a.tooltip").mousemove(function(e) { 
     jQuery("#tooltip") 
      .css("bottom", e.pageY - xOffset + "px") 
      .css("left", e.pageX + yOffset + "px"); 
     }); 
}