Question

Here is the jquery which I am using to display a tooltip:

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

In HTML I have :  

.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; 
 }

Now tooltip should shift it’s position so it is still full visible if the window is smaller. I need to shift the position of tooptip to top/left of the object being hovered. But when I check $(this).offset().left + toolTipWidth > documentWidth, I do not see condition getting true as I see these values as:

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

What is wrong here?

Answer 1

If you are using window resize , its better to get the height and width of window not document,

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

I think this is your problem!!