본문 바로가기

장난감들

Simple Tooltip Class

아랫글에서 말했던, daybreaker.info 첫화면을 리뉴얼할 때 사용한 간단한 툴팁 클래스를 공개한다. prototypemoo.fx가 필요하다. (첫화면에는 html 소스에 바로 들어가 있는데 여기서는 js 파일로 정리했다.)

tooltip.js

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님 블로그의 툴팁 소스를 참조했다. 너무나 복잡한 기능이 많아서 아주 간단하게 정리해본 것이다.
  • LonnieNa 2006.09.16 01:26

    요거 태터툴즈 메뉴얼 작업하는데 잘 쓰고 있습니다.
    근데 onload가 다른것과 함께 두가지가 겹치면 안되더라구요.
    제가 잘못하는건지.

    • daybreaker 2006.09.16 21:31 신고

      window.onload = ...; window.onload = ....; 이런 식으로는 안 될 겁니다. prototype의 Event 객체를 쓰시거나, 별도의 window.onload 핸들러를 만들어 그 안에서 일일이 호출해주는 방법이면 될 것 같군요.

      근데.. 제가 이거 만들고 나서 며칠 있다가 moo.tools 나오고 거기에 tips 클래스 기본 포함되었다는 거...;; (물론 제가 만든 건 아니지만 구조는 상당히 비슷합니다)

  • Cheap Oakley sunglasses 2013.07.19 09:21

    창밖을 봐 바람에 나뭇가지가 살며시 흔들리면 네가 사랑하는 사람이 널 사랑하고 있는거야.

  • nike 2013.07.22 00:18

    희미한 달빛이 샘물 위에 떠있으면,나는 너를 생각한다.

  • GHd 2013.07.23 05:04

    지금은 반짝반짝 빛이 나겠지,, 하지만 시간이 흐르면 그빛은 사라저버릴거야,지금 우리처럼