jQuery - 디자인 요소 툴팁 박스 생성하기 / tooltipsy

---

레이어 부가설명 박스 달기

---

안녕하세요.

고코더 입니다.

브라우저는 title 요소에 값을 넣으면

보통 기본 팁 박스를 제공합니다.

하지만 우리의 클라이언트는

특이한걸 원하는 분이 많습니다.

이 타이틀 속성의 툴 팁의 디자인 요소를 넣고 싶어할 수도 있습니다.

그래서 이번 시간에는 toll tip을 바꿀수 있는 플러그인을

소개 하려 합니다.

▼ tooltipsy 라는 플러그인 입니다.

http://tooltipsy.com/

▼ 아주 간단하게 툴박스를 생성할 수 있는데요

아래 예제를 한번 실행해보세요. 

gocoder_tooltip.html

<script src="http://code.jquery.com/jquery.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/tooltipsy@1.0.0/tooltipsy.min.js" ></script>
<input type="text" id="gocoder_tooltip" title="GoCoder ITExpress" />
 
<script type="text/Javascript">
 
         $("#gocoder_tooltip").tooltipsy({
 
            css: {
                'padding': '5px',
                'max-width': '100px',
                'color': '#303030',
                'background-color': '#ffffff',
                'border': '2px solid #4893BA',
                'text-shadow': 'none',
                'font-size':'10px'
            }
 
        });
 
</script>

▼ 이렇게 디자인이 노출 됩니다. 

가장 기본적인 사용법 이외에

다양한 효과는 

▼ 샘플을 활용해보세요.

http://tooltipsy.com/samples.html

다양한 효과와 액션 예제가 있으니

필요한 부분을 따라 쓰고

커스텀하시면 될거 같습니다.

기본적으로 외국 스러운 디자인이라

CSS는 수정해서 쓰셔야 겠네요. 

---

추천 플러그인

---

JavaScript- 타이핑 애니메이션 / typewriterjs

jQuery - 게시판 정렬하기 / Table sort

jQuery - 제이쿼리로 QR코드 만들기

jQuery | Plugin - select 박스 검색 가능하게

jQuery - 바코드(barcode) 만들기

jQuery - lazyload() 이미지 동적으로 / 스크롤시 호출

---

마무리

---

기본 모양이 가장 이쁜데..