[웹개발/ JQuery] 마우스오버(mouseover)시 툴팁(tooltip) 보여주는 기능

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

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

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

소스 다운 받기: 

tooltip.js

1. JQuery 

$(document).ready(function() { // html 페이지에서 'rel=tooltip'이 사용된 곳에 마우스를 가져가면 $('a[rel=tooltip]').mouseover(function(e) { var tip = $(this).attr('title'); // 브라우져에서 제공하는 기본 툴 팁을 끈다 $(this).attr('title',''); // css와 연동하기 위해 html 태그를 추가해줌 $(this).append('<div id="tooltip"><div class="tipBody">' + tip + '</div></div>'); }).mousemove(function(e) { //마우스가 움직일 때 툴 팁이 따라 다니도록 위치값 업데이트 $('#tooltip').css('top', e.pageY + 10 ); $('#tooltip').css('left', e.pageX + 10 ); }).mouseout(function() { //위에서 껐던 브라우져에서 제공하는 기본 툴 팁을 복원 $(this).attr('title',$('.tipBody').html()); $(this).children('div#tooltip').remove(); }); });

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

mouseover:

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

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

mousemove:

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

mouseout:

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

2. css 

#tooltip { position: absolute; z-index: 999; color: white; font-size: 15px; } #tooltip .tipBody { background-color: black; padding: 8px; }

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

3. html 

<a rel="tooltip" title="{{ tool_tip_message }}"> mouse over here </a>

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

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