어떻게 브라우저 창 가장자리에 상자를 유지할 수 있습니까?

Question

특정 입력 요소가 포커스를받을 때 그 옆에 나타나고 상단 정렬 된 툴팁 div를 만들고 싶습니다.

    bla bla blah 
____________ ___________________ 
| this  | [_button____clicked_] 
| appears | 
| on side | body content dafjsd fdjskf sdf 
|____________| content djsfs df skfjs daskf kdf s 
       text texty djkf jsk fdjfs 
       texty hehe blabla ajdfskfsd 

절대 위치 지정으로이 작업을 수행 할 수 있습니다. 그러나 스크롤없이 모든 툴팁을 볼 수 있기를 원치 않으므로 입력 상자가 윈도우 하단에있는 경우 툴팁은보기 상태로 유지되어야합니다.

    content djsfs df skfjs daskf kdf s 
       text texty djkf jsk fdjfs 
       texty hehe blabla ajdfskfsd 
____________ bla bla blah 
| this  | ___________________ 
| appears | [_button____clicked_] 
| on side | 
|____________| edge of broswer window vvv 
------------------------------------------------------------ 

즉, 사용자가 위아래로 스크롤 할 때 툴팁은 가능한 한 가능한 위치에 가깝게 유지되어야합니다.

Answer 1

매우 간단한 자바 스크립트 루트 툴팁 스크립트 코드 인 http://www.dynamicdrive.com/dynamicindex5/dhtmltooltip.htm을 읽으면 딜레마에 대한 답을 찾을 수 있습니다.

브라우저 창 가장자리를 감지하여 해당 입력을 기반으로 다른 위치에 매우 부드럽게 표시합니다. 페이지 상단의 툴팁 데모를 테스트하면 의미를 알 수 있습니다.

그러나 직접 질문에 대답하는 가장 좋은 방법은 자바 스크립트를 사용하여 먼저 어떤 브라우저가 사용되고 있는지 확인한 다음 적절한 화면 너비 계산을 사용하여 너비, 높이 및 현재를 기준으로 툴팁을 표시하는 것입니다. 브라우저 창의 '위치'. 이 조건부 브라우저 로직 및 화면 너비 계산의 예는 위에 링크 된 코드에서 찾을 수 있습니다.

희망이 도움이됩니다.

편집

:

은 몇 가지 생각 후, 난 그냥 참조를 위해, 내가 링크 어느 날에 오류가 발생하는 경우에는 위의 연결 코드의 JS 측면을 포함 단지 인 것이라고 상상했다. 그것은 조금 은폐되어 있지만 그럼에도 불구하고 브라우저 창을 기반으로 툴팁 위치를 다루는 스크립트가 있습니다 :

var offsetxpoint=-60 //Customize x offset of tooltip 
var offsetypoint=20 //Customize y offset of tooltip 
var ie=document.all 
var ns6=document.getElementById && !document.all 
var enabletip=false 
if (ie||ns6) 
var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : "" 

function ietruebody(){ 
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body 
} 

function ddrivetip(thetext, thecolor, thewidth){ 
if (ns6||ie){ 
if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px" 
if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor 
tipobj.innerHTML=thetext 
enabletip=true 
return false 
} 
} 

function positiontip(e){ 
if (enabletip){ 
var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft; 
var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop; 
//Find out how close the mouse is to the corner of the window 
var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20 
var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20 

var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000 

//if the horizontal distance isn't enough to accomodate the width of the context menu 
if (rightedge<tipobj.offsetWidth) 
//move the horizontal position of the menu to the left by it's width 
tipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px" 
else if (curX<leftedge) 
tipobj.style.left="5px" 
else 
//position the horizontal position of the menu where the mouse is positioned 
tipobj.style.left=curX+offsetxpoint+"px" 

//same concept with the vertical position 
if (bottomedge<tipobj.offsetHeight) 
tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px" 
else 
tipobj.style.top=curY+offsetypoint+"px" 
tipobj.style.visibility="visible" 
} 
} 

function hideddrivetip(){ 
if (ns6||ie){ 
enabletip=false 
tipobj.style.visibility="hidden" 
tipobj.style.left="-1000px" 
tipobj.style.backgroundColor='' 
tipobj.style.width='' 
} 
} 

document.onmousemove=positiontip