Django를 기반으로 웹 개발을 할 때 특정 단어나 위치에 마우스를 가져가면 툴 팁이 떠서 지정해둔 메시지를 보며주도록 하는 기능을 개발하기 위한 설명입니다. 

작업은 크게 세 가지 파트로 구분할 수 있습니다. 


추천은 저를 춤추게 합니다 ^^



소스 다운 받기: 

tooltip.js



1. JQuery 


mouseover, mousemove, mouseout 세 가지 액션에 대해 정의해 줍니다. 


mouseover:

현재 마우스가 위치한 곳의 title 속성의 값을 가져와서 보여줍니다. 

마우스의 위치에 따라 툴 팁이 보여지는 위치가 달라지므로 css 함수를 써서 위치 정보를 가져오도록 합니다. 


mousemove:

마우스를 움직일 때 마다 툴 팁이 마우스를 따라 다니도록 마우스의 위치 값을 가져다가 툴 팁의 위치를 업데이트 해줍니다. 

mouseout:

마우스가 링크 정보가 담긴 위치를 벗어 났다면 툴 팁이 보이지 않도록 제거해 줍니다. 



2. css 


툴 팁의 배경 색깔과 폰트 등을 설정해줍니다. 



3. html 


마우스를 가져갔을 때 툴 팁을 보여주기 위한 html입니다.

DJango를 사용하고 있다면 title값은 변수로 넘겨받은 값으로 지정해주는 것도 가능합니다. 


Posted by KT한
,