jQuery 위치 요소 기반 윈도우 크기 조정

Question

이 페이지를 보면 :jQuery에 대해 더 많이 배우고 페이스 북에서 보았던 것과 유사한 것을 개발하는 방법을 배우고 자합니다.

내가 빨간색 상자를 기준으로 배치 된 툴팁이 표시됩니다. 그러나 창 크기를 조정하면 팁과 관련하여 조정되지 않습니다. 이 문제를 어떻게 해결할 수 있습니까?

또한 사용자가 창 높이를 조정하면 요소가 상당히 크다는 것을 고려하면 팁이 위쪽으로 이동하여 화면의 뷰포트에 표시되도록 할 수 있습니다. 즉, 페이지 하단에서 항상 약 20 픽셀 떨어진 곳에 있어야합니다. 같은 위치에 화살표를 유지하면 이제는 상자 자체 만 조정할 수 있습니다.

아무도 그 두 가지를 달성 할 수 있습니까? 매우 감사. 감사합니다

Answer 1

당신이 이벤트의 크기를 조정 창에서 위치를 계산해야합니다 :

$(window).resize(function() { 
    // your positioning code here 
}); 

---

$(document).ready(function() { 

    calculation(); 
    $(window).resize(calculation); 

    function calculation() { 
     var location = $("#link").offset(); 

     var top = location.top; 

     var left = location.left; 
     left = left - $('#tip').width(); 
     left = left - 15; 

     $("#tip").css({ 
      'position': 'absolute', 
      'top': top + 'px', 
      'left': left + 'px' 
     }); 
    } 
});