레이어 부가설명 박스 달기


안녕하세요.
고코더 입니다.


브라우저는 title 요소에 값을 넣으면
보통 기본 팁 박스를 제공합니다.


하지만 우리의 클라이언트는
특이한걸 원하는 분이 많습니다.

이 타이틀 속성의 툴 팁의 디자인 요소를 넣고 싶어할 수도 있습니다.
그래서 이번 시간에는 toll tip을 바꿀수 있는 플러그인을
소개 하려 합니다.

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


▼ 아주 간단하게 툴박스를 생성할 수 있는데요
아래 예제를 한번 실행해보세요. 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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>
cs
▼ 이렇게 디자인이 노출 됩니다. 


가장 기본적인 사용법 이외에
다양한 효과는 

▼ 샘플을 활용해보세요.


다양한 효과와 액션 예제가 있으니
필요한 부분을 따라 쓰고
커스텀하시면 될거 같습니다.

기본적으로 외국 스러운 디자인이라
CSS는 수정해서 쓰셔야 겠네요. 



마무리


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


댓글을 달아 주세요