0

ツールチップを表示するために使用しているjqueryは次のとおりです。

$(document).ready(function() {
$(".toolTip").hover(
    function() {
    var div_id = $(this).attr('id').split("_")[0];  
    if($("#"+div_id).length){
          //
    } 
    $(this).append(
     '<div class="toolTipWrapper">'
        +$("#"+div_id).text()
      +'</div>'
    );
    this.width = $(this).width();
    //Get the HTML document width and height
    var documentWidth = $(document).width();
    var documentHeight = $(document).height();
    var toolTipWidth = $('.toolTipWrapper').width();
    alert(documentWidth+" "+toolTipWidth+" "+$(this).offset().left);
    if ($(this).offset().left + toolTipWidth  > documentWidth) {
        alert("COMING");
    }
    //ends
    $(this).find('.toolTipWrapper').css({left:this.width+16})
    $('.toolTipWrapper').fadeIn(300);
  },
    function() {
      $('.toolTipWrapper').fadeOut(100);
    }
  );
});

HTMLには次のものがあります：  

.toolTip {
    padding-right: 20px; 
    background: url(../images/help.png) no-repeat right;
    color: #3366FF;
    position: relative;
 }
 .toolTipWrapper { 
    width: 350px;
    position: absolute;
    top: 10px;
    display: none; 
    color: #4D4D4D;
    font-size: 12px; 
    background-color: #EFF0F0; 
    border-color: #C9C9C9;
    border-width: 1px;
    border-style: solid; 
    padding: 6px 15px; 
 }

これで、ウィンドウが小さい場合でも完全に表示されるように、ツールチップの位置が移動するはずです。tooptip の位置を、ホバリングされているオブジェクトの左上に移動する必要があります。しかし、チェックする $(this).offset().left + toolTipWidth > documentWidthと、これらの値が次のように表示されるため、条件が true になることはありません。

documentWidth 784   toolTipWidth 350    $(this).offset().left 383

ここで何が問題なのですか？

4

1 に答える 1

1

window resize を使用している場合は、windownotdocumentの 高さと幅を取得することをお勧めします。

$(window).height();
$(window).width();

これはあなたの問題だと思います!!

于 2012-09-11T19:58:19.837 に答える