Tooltip library

Web에서 Tooltip이란 일반적으로 특정 아이템위에 마우스를 가져갔을 때 아이템을 설명하는 내용이 뜨는 것을 의미합니다. 간단하게는 태그의 title이나 desc등의 속성을 이용하는 방법에서 Floating 가능한 div 태그를 사용하는 법까지 여럿 있습니다. 여기에서는 JavaScript에서 제공되는 라이브러리에 대해서 요약 정리합니다.

BoxOver library

BoxOver library는 다른 라이브러리들과 다르게 version이 2.1이며, 대부분의 코드가 div의 css를 꾸미는데(?) 사용되고 있습니다. fadein/fadeout시에도 alpha값을 직접 줘서 페인팅하고 있습니다. 10kb도 안되는 용량에 가벼운 라이브러리로 소개 되어 있네요. DIV의 title 태그에 option을 받아서 세부 동작을 지정할 수 있도록 해놨습니다.

1. 라이센스 : GNU license
2. Tooltip 이벤트 : onClick/onMouseOver/onMouseOut등의 이벤트
3. 필요 라이브러리 : 없슴
4. version : 2.1
5. Tooltip 설정 : Page loading시 전체 tag를 파싱하여 Tooltip(div태그 및 내용)을 생성하여 출력
   

Tooltip.js

Tooltip.js는 Tooltip에서 제공될 수 있는 기능을 단순하면서도 모두 제공하는 것을 목표로 하고 있습니다. 화면에 출력 및 감추기 위한 이벤트를 따로 설정이 가능하며 Script.aculo.us에서 제공하는 Effect를 사용하여 나타내고/사라지게 하는 Effect를 따로 설정할 수 있게 했으며, 나타나고 사라지는 시간에 대한 설정도 가능합니다.

1. 라이센스 : MIT-style license
2. Tooltip 이벤트 : onClick(default로 설정)을 비롯하여 설정 가능한 모든 이벤트
3. 필요 라이브러리 : Prototype.js, Script.aculo.us
4. version : 0.6
5. Tooltip 설정 : Page loading시간 또는 script 내부에서 자유로이 설정 가능
   
6. mouseover/mouseout 이벤트로 tooltip을 생성할 때 toggle 메소드로 인하여 이벤트가 계속 발생하는 버그존재
   

BlogFish의  Tooltip.js

BlogFish의 Tooltip library는 Ajaxian.com에서도 언급하고 있는 것처럼 Tooltip.js에서 Tooltip의 기본적인 기능만을 추출하여 제공하고 있습니다.

1. 라이센스 : BSD license
2. Tooltip 이벤트 : onmouseover/onmouseout 이벤트
3. 필요 라이브러리 : Prototype.js, Script.aculo.us
4. version : 0.1
5. Tooltip 설정 : Script 내부에서 호출하여 자유로이 설정 가능
   

YUI library

YUI library의 경우에는 Yahoo의 core라이브러리가 기본적으로 필요하며(상속) Tooltip은 Module을 상속받은 Overlay를 상속받아 만드러져 있어서 라이브러리 자체가 무겁게 되어 있습니다. YUI로 모든 서비스를 구축한다면 문제가 될만할 것 같지는 않군요. 코드 내부를 보면 잘 설계되어 있는 것을 확인할 수 있습니다. 그러나, YUI를 전부 가져다 쓸 생각이 없으므로 패스 ^^

1. 라이센스 :  BSD license
   
2. Tooltip 이벤트 : onmouseout/onmouseover/onmousemove 이벤트
3. 필요 라이브러리 : YUI 라이브러리
4. version : 0.11.4
   
5. Tooltip 설정 : Script 내부에서 호출하여 자유로이 설정 가능
   

출처 :

Ajaxian.com
BoxOver library
Tooltip.js
BlogFish의 Tooltip library
Yahoo의 YUI library