아랫글에서 말했던, daybreaker.info 첫화면을 리뉴얼할 때 사용한 간단한 툴팁 클래스를 공개한다. prototype과 moo.fx가 필요하다. (첫화면에는 html 소스에 바로 들어가 있는데 여기서는 js 파일로 정리했다.)
invalid-file
사용법은 아주 간단하다. window.onload와 같은 이벤트에서 initTooltips() 함수를 호출해주면, 자동으로 페이지에 있는 모든 a 태그를 검사하여 title 속성이 있는 태그에 대해 툴팁을 달아준다. 이때 새로운 div 태그가 body에 하나 추가되는데, 이 태그는 tooltip이라는 class로 설정되므로 style sheet에서 적절하게 디자인을 정의해주면 된다. (평상시엔 보이지 않는 태그이므로 페이지의 레이아웃에는 전혀 영향을 주지 않는다)
그렇게 하면 마우스를 링크에 가져다 대었을 때 Windows XP의 툴팁처럼 투명도 애니메이션이 진행되는 툴팁을 볼 수 있을 것이다. moo.fx를 확장한 moo.fx.pack을 쓴다든가 하면 더 화려한 효과를 제공할 수 있다. 다만, mouseout 이벤트 발생 시, 툴팁을 숨겨야 하는데 마우스를 빨리 움직여 다른 링크에 mouseover 이벤트가 발생한다든가 하면 툴팁이 화면에 남아있거나 깜빡거리는 문제가 있어서, 서서히 사라지는 효과는 넣지 않았다. (이에 대한 처리는 moo.fx에서 제공하는 clearTimer 메소드를 이용해 애니메이션을 강제 중단시키는 방법을 사용하였다. 만약 툴팁 div element를 하나만 쓰지 않고 각 링크마다 생성하여 쓴다면 해결할 수 있을지도 모르겠다.)
확실히 prototype과 같은 javascript framework를 써보니까 편하다. Cross-browsing을 전혀 신경쓰지 않고 원하는 대로 구현할 수 있기 때문이다. 여기에 moo.fx라는 매우 작고 강력한 animation library까지 있으니 더할나위 없다. 나중에는 Yahoo UI library도 한 번 써봐야겠다.
ps. 만들 때 Firejune님 블로그의 툴팁 소스를 참조했다. 너무나 복잡한 기능이 많아서 아주 간단하게 정리해본 것이다.
invalid-file
Simple Tooltip Script
사용법은 아주 간단하다. window.onload와 같은 이벤트에서 initTooltips() 함수를 호출해주면, 자동으로 페이지에 있는 모든 a 태그를 검사하여 title 속성이 있는 태그에 대해 툴팁을 달아준다. 이때 새로운 div 태그가 body에 하나 추가되는데, 이 태그는 tooltip이라는 class로 설정되므로 style sheet에서 적절하게 디자인을 정의해주면 된다. (평상시엔 보이지 않는 태그이므로 페이지의 레이아웃에는 전혀 영향을 주지 않는다)
그렇게 하면 마우스를 링크에 가져다 대었을 때 Windows XP의 툴팁처럼 투명도 애니메이션이 진행되는 툴팁을 볼 수 있을 것이다. moo.fx를 확장한 moo.fx.pack을 쓴다든가 하면 더 화려한 효과를 제공할 수 있다. 다만, mouseout 이벤트 발생 시, 툴팁을 숨겨야 하는데 마우스를 빨리 움직여 다른 링크에 mouseover 이벤트가 발생한다든가 하면 툴팁이 화면에 남아있거나 깜빡거리는 문제가 있어서, 서서히 사라지는 효과는 넣지 않았다. (이에 대한 처리는 moo.fx에서 제공하는 clearTimer 메소드를 이용해 애니메이션을 강제 중단시키는 방법을 사용하였다. 만약 툴팁 div element를 하나만 쓰지 않고 각 링크마다 생성하여 쓴다면 해결할 수 있을지도 모르겠다.)
확실히 prototype과 같은 javascript framework를 써보니까 편하다. Cross-browsing을 전혀 신경쓰지 않고 원하는 대로 구현할 수 있기 때문이다. 여기에 moo.fx라는 매우 작고 강력한 animation library까지 있으니 더할나위 없다. 나중에는 Yahoo UI library도 한 번 써봐야겠다.
ps. 만들 때 Firejune님 블로그의 툴팁 소스를 참조했다. 너무나 복잡한 기능이 많아서 아주 간단하게 정리해본 것이다.