Tooltip (툴팁) 에관하여 :: TITLE vs ALT(알트) :: (2009-02-12 수정) > 기술자료

• 목록
• 게시판 리스트 옵션
  • 검색

툴팁(tooltip attribute)은 다른 말로 "도구설명"이라고도 합니다.
익스플로러나 워드프로세서 등의 프로그램들을 보면 도구단추들이 있는데,
이러한 도구단추 위로 마우스를 올리면 시작, 검색 등의 글자가 나타나 도구단추의 용도를 알려줍니다.
툴팁은 바로 이러한 것을 말합니다.  다른말로는 "풍선도움말"이라고도 하지요.



1.이미지에 설명글 달기.
img 태그에서 alt속성은 이미지를 로딩할 수 없는 상황에서 그 이미지를 대체하기 위한 텍스트입니다.
title속성은 base, head, html, meta, param, script, style, title 태그를 제외한 태그에 사용할 수 있으며, 해당 엘리먼트에 마우스를 가져가면 띄워줄 툴팁(tooltip) 메시지를 설정할 수 있습니다.

IE에서는 title속성이 없을 때 alt속성이 있으면 그것을 툴팁으로 보여줍니다.

<img src="그림 주소" alt="그림이 없을 때 나올 설명" title="말풍선에 나올 설명" />
- title :이미지에 대한 툴팁 설명을 제공하는 속성 (tooltip attribute)
- alt : 이미지를 대체하는 문구를 제공하는 속성, 흔히 "알트"라고 부르죠 (alternate attribute)

2. 링크에 설명글 달기
<a href="링크" title="말풍선에 나올 설명">여기를</a>

3. 텍스트(일반글)에 설명글 달기
<span title="말풍선에 나올 설명" style="CURSOR:hand;">일반 Text 에서 Tooltip 보기</span>

4. Text Box(입력상자)에 설명글 달기
<input type="text" value="Text Box Tooltip" style="CURSOR:hand;"  title="말풍선에 나올 설명" />

5. Button에 설명글 달기
<input type="button" value="버턴툴팁" style="CURSOR:hand;"  title="말풍선에 나올 설명" />

6. 줄바꿈
alt 나 title의 줄바꿈울 할때는 일반 태그와 같이 br을 사용할수 없습니다.
alt 나 title의 줄바꿈은 &#13; 을 넣어야 합니다.
<img src="체리.jpg" alt="체리그림" title="이것은&#13;체리그림&#13;입니다" />

7. 속성들이 전부 제공되어 있을 경우 우선순위
title > alt

참고자료
http://hinaki.tistory.com/99 
http://hooney.net/2006/05/14/273/ 
http://mysesang.com/buty/tooltip.html