jQuery Tooltip example

jQuery Tooltip example입니다.

jQuery를 사용하여 툴팁을 표현해야 할 상황이 있습니다.

툴팁은 특정 명령을 통해 풍선도움말을 띄워 부연설명을 할 때 주로 사용됩니다.

특정 명령이란 mouseover, mouseout, mouseenter, mouseleave, click 등의 액션을 뜻합니다.

html 태그의 title이나 alt 속성으로 툴팁과 비슷한 효과를 줄 수 있지만

툴팁은 웹접근성의 목적으로 사용하려는 것이 아니기 때문입니다.

title이나 alt 속성을 사용하여 풍선도움말 형식으로 부연설명이 가능할수는 있겠지만

위에서 언급한 특정 명령을 취했을 경우 바로바로 반응하여 나타나지 않습니다.

이러한 풍성도움말 기능을 Javascript로 직접 만들어도 되지만

잘 개발되어 있는 jQuery를 두고 굳이 따로 만들 필요는 없을 것 같습니다.

아래는 jQuery에서 제공하는 Tooltip을 테스트한 내용을 예제로 만들어봤습니다.

  

    
이준빈은 호박머리
    
마우스를 올려보세요.
  
  

    
jQuery Tooltip example
    
마우스를 올려보세요.
  
  

    
jQuery 툴팁 테스트
    
마우스를 올려보세요.
  

위와같이 head 태그 안에 jQuery와 jQueryUI js파일을 참조하도록 추가하고

body에 간단한 table로 예제를 만들어봤습니다.

row 단위로 tooltip이 적용되어 마우스 오버(mouseover) 시 툴팁이 나타나게 됩니다.

툴팁의 디자인과 위치는 직접 커스터마이징이 가능합니다.

아래는 마우스 오버 했을 때의 결과물입니다.

1. 첫 번째 row에 마우스를 올렸을 경우

2. 두 번째 row에 마우스를 올렸을 경우

3. 세 번째 row에 마우스를 올렸을 경우

jQueryUI 사이트 참고 URL : https://jqueryui.com/tooltip/