사용자가 입력하는 동안 힌트 상자 또는 툴팁을 표시하려면 어떻게합니까?

나는 우리의 페이지에서 약 1000 텍스트 필드가 있고, 사용자가 현재에 입력 된 텍스트 필드 위의 도구 설명을 표시해야합니다.사용자가 입력하는 동안 힌트 상자 또는 툴팁을 표시하려면 어떻게합니까?

그것은 간단하게 들리 겠지만 나는 상단에 표시하는 방법을 알아내는 데 어려움이있어 문서의 흐름을 중단하지 않고 페이지의 다른 모든 것들을 볼 수 있습니다.

외부 라이브러리를 사용할 수 없으므로 조금 더 어려워집니다. 순수 JS (또는 TypeScript와 같은 순수 JS로 컴파일되는 언어) 만 사용할 수 있습니다.

링크, 자습서 또는 그런 사람이 있습니까? 그것은 매우 도움이 될 것입니다.

감사합니다

편집 : 당신이 요소에 title 속성을 사용할 수 있음을 알고는, 그러나이 툴팁이 그 안에 단지 텍스트보다 더 가질 필요가 더 큰 직접 위에 있어야 텍스트 상자. 이 같은

출처

2012-10-29 Arrow

뭔가 당신을 도울 수 있습니다

http://jsfiddle.net/ysuw5/

<div id="container"> 
    <input type="text" class="tooltip" onfocus="theFocus(this);" onblur="theBlur(this);" title="asdf" /><br /> 
    <input type="text" class="tooltip" onfocus="theFocus(this);" onblur="theBlur(this);" title="asdf2" /><br /> 
    <input type="text" class="tooltip" onfocus="theFocus(this);" onblur="theBlur(this);" title="asdf3" /><br /> 
    <input type="text" class="tooltip" onfocus="theFocus(this);" onblur="theBlur(this);" title="asdf4" /><br /> 

    <div id="tooltip"></div> 
</div> 

function theFocus(obj) { 
    var tooltip = document.getElementById("tooltip"); 
    tooltip.innerHTML = obj.title; 
    tooltip.style.display = "block"; 
    tooltip.style.top = obj.offsetTop - tooltip.offsetHeight + "px"; 
    tooltip.style.left = obj.offsetLeft + "px"; 
} 

function theBlur(obj) { 
    var tooltip = document.getElementById("tooltip"); 
    tooltip.style.display = "none"; 
    tooltip.style.top = "-9999px"; 
    tooltip.style.left = "-9999px"; 
}

이것은 분명히 매우 편협하고 정확하게 당신이 필요에 맞게 수정 될 필요가있을 것이다. 나는 focus과 blur 이벤트를 Javascript로 바인딩하는 것을 신경 쓰지 않았습니다. HTML에 넣는 것보다 낫습니다.

출처

2012-10-29 07:01:23 Ian

안녕하세요! 멋지네, 나는 그것을 좋아한다. 감사합니다 @ianpgall :-) – Arrow

'title 속성 값이 일반 텍스트이기 때문에 "이 툴팁에는 그 안에 텍스트 이상이 있어야합니다"라는 조건을 만족한다고 생각하지 않습니다. –

@ JukkaK.Korpela 매우 사실이지만, 나는 그것을 놓쳤거나 잊어 버렸는지 잘 모르겠다. – Ian

다양한 방법으로 "CSS 툴팁"을 사용할 수 있습니다. 상대적으로 간단한 아이디어는 필드 바로 앞에 CSS로 숨겨진 div에 힌트 내용을 배치하는 것입니다. 그런 다음 해당 div을 표시로 변경하는 onfocus 이벤트 핸들러가 필요합니다 (다시 보이지 않게하는 onblur 핸들러). 힌트와 필드를위한 컨테이너를 사용하고 "절대적으로"(컨테이너에 상대적으로) 힌트를 배치 할 수 있도록 컨테이너를 상대적 위치로 선언합니다.

예 (jsfiddle는). 당신이 사용할 수없는 이유

<!DOCTYPE HTML> 
<meta charset=utf-8> 
<style> 
.textfield { 
    position: relative; 
} 
.textfield .hint { 
    display: none; 
    position: absolute; 
    width: 10em; 
    bottom: 1.3em; 
    background: #ff9; 
    padding: 0 0.2em; 
    border: solid 1px; 
} 
</style> 
<script> 
function hint(elem) { 
    elem.parentNode.firstElementChild.style.display = 'block'; 
} 
function unhint(elem) { 
    elem.parentNode.firstElementChild.style.display = 'none'; 
} 
</script> 
<p>This is just some filler text. 
<table> 
<tr> 
    <td><label for=bar>Bar</label> 
    <td> 
    <div class=textfield> 
    <div class=hint>This is hint text for the Bar field.</div> 
    <input id=bar name=bar onfocus="hint(this)" onblur="unhint(this)"> 
    </div> 
<tr> 
    <td><label for=foo>Foo</label> 
    <td> 
    <div class=textfield> 
    <div class=hint>This is hint text for the Bar field.</div> 
    <input id=foo name=foo onfocus="hint(this)" onblur="unhint(this)"> 
    </div> 
</table>

(이 방법으로 당신은 CSS의 위치가 테이블 셀 작동하지 않는다는 것을 기억해야합니다, 양식을 structurize하기 위해 테이블을 사용하여입니다 래퍼로 td 요소가 있지만 그 안에 div을 사용해야합니다.

출처

2012-10-29 07:28:27

사용자가 입력하는 동안 힌트 상자 또는 툴팁을 표시하려면 어떻게합니까?

답변

관련 문제