jQuery Tooltipsy (툴팁 & 힌트 플러그인)

쉽고 간편하고 편리하게 쓰자! jQuery Tooltipsy

대부분 개발하면서 한번쯤은 툴팁이 필요한 순간이 있습니다.

회원가입을 한다던가,

도움말을 올린다거나,

또는 힌트를 준다던가.

사용할 순간은 많고 많은데, 어찌 표현할지는 한번씩 고민합니다.

저같은 경우는 처음에 title 속성을 사용했습니다.

근데 title 속성에는 단점이있지요..

---

꾸밀수 없으며, 꾸밀수 없기에 투박하고, 늦게 뜬다.

---

이정도는 대부분 공감하리라 믿습니다..

그래서 이번포스팅에서는 아주아주 간편하고, 매우 쉬우며, 빠르게 사용할 수 있는,

jQuery 툴팁 플러그인을 소개해 드리겠습니다.

플러그인 이름은 jQuery Tooltipsy(링크) 입니다.

링크를 타고 들어가시면 빨간색 배경으로 강렬하게 맞이하여 줍니다.

들어가시면 아주 쉽게 사용설명이 되어있습니다.

1. 인스톨

2. 스타일

3. 활성화

사실 이부분은 어떠한 플러그인도 똑같은 절차기 때문에 자세한 설명은 넘어가도록 하겠습니다.

다운로드는 jQuery Tooltipsy Github(링크) 에서 받으시면 되겠구요.

라이센스는 GNU 입니다.

당연히 크로스브라우징은 걱정하지 않으셔두 되구요.

IE는 8부터 테스트 해보았습니다.

이제 준비가 모두 되셨으면 플러그인에 대한 상세설명을 해드리곘습니다.

---

1. title 속성을 사용한다.

---

jQuery Tooltipsy 는 타이틀 속성을 사용합니다.

툴팁을 띄울 엘리먼트에 타이틀을 적어놓으신 뒤, 해당 엘리먼트를 툴팁으로 사용한다고 명시하면 툴팁이 활성화됩니다.

아래 소스로 확인하시면 빠르게 이해 하실 수 있으실 겁니다.

<input type="text" id="tooltip" title="이렇게 사용하면 됩니다" />

 

마크업을 이렇게 하구요.

$("#tooltip").tooltipsy();

 

이렇게 활성화 하면 끝입니다.

매우 간단하죠?

---

2. 여러가지 옵션

---

jQuery Tooltipsy 에는 여러가지 옵션이 있습니다.

첫번째로 CSS 제어입니다.

$("#tooltip").tooltipsy({
    css: {
        'padding': '10px',
        'max-width': '200px',
        'color': '#303030',
        'background-color': '#ffffff',
        'border': '2px solid #4893BA',
        '-moz-box-shadow': '0 0 10px rgba(0, 0, 0, .5)',
        '-webkit-box-shadow': '0 0 10px rgba(0, 0, 0, .5)',
        'box-shadow': '0 0 10px rgba(0, 0, 0, .5)',
        'text-shadow': 'none'
    }
});

옵션은 이런식으로 사용하시면 되구요. 개인적으로 이쁘게 꾸미시면 됩니다.....어찌보면 이부분이 제일 어렵겠네요. :)

두번째로 딜레이 제어입니다.

딜레이라 함은, 마우스를 오버하였을때 툴팁이 표현되기 까지의 시간을 말합니다.

$("#tooltip").tooltipsy({
    delay: 0
});

저같은 경우는 딜레이를 0으로 주어 오버시 바로 툴팁이 뜨도록 설정하여 사용하고 있습니다.

세번째는 위치 제어입니다.

$("#tooltip").tooltipsy({
    offset: [0, 10]
});

 첫번째가 상하, 두번째가 좌우 값입니다.

네번째는 내용 제어입니다.

$("#hastip").tooltipsy({
    content: '<em>툴팁</em><strong>내용변경</strong>'
});

 

기존에 title 속성으로 주신 뒤, 다른 컨텐츠를 넣어야 할 경우 이렇게 사용하셔도 됩니다.

그 외에도 여러가지 옵션이 존재합니다.

콜백도 존재하구요.

그치만 이번포스팅에서는 아주 핵심적인 기능들만 설명드렸으니 너그러운 양해 부탁드리겠습니다. :D

샘플은 jQuery Tooltipsy Sample(링크) 를 참고해 주시면 되겠습니다.

jQuery 툴팁 플러그인 역시 여러가지가 존재합니다.

추후 더 좋은 플러그인이 있다면 소개해 드리겠습니다.

읽어주셔서 감사합니다.