웹솔루션개발 25년 노하우! 해피CGI의 모든것

* Intro.js 소개 - 사이트의 단계별,섹션별로 가이드가 가능하며 멘트나 이미지를 부각 시켜 수 있는 플러그인 * 라이센스 - GNU AGPLv3 * 사용방법 기본제공되는 css 를 상단에 선언합니다 아래와 같이 단계별 가이드를 하여 내용을 부각시키기 위한 버튼을 만들어 줍니다 스크립트로 시작하여 data-step 옵션과 같이 몇단계에서 보여줄지 지정할 수 있습니다 마지막으로 intro.js 의 호출 부분으로 구성은 마무리 됩니다 위와 같이 단계별 tooltip 기능을 보여줌으로써 사이트의 차트 플로우나 내용이 복잡한 부분에 있어서 쉽게 설명해 줄 수 있을것으로 생각됩니다

css를 이용한 툴팁소스 입니다. css만으로 작동합니다. 버튼을 클릭하면 에니메이션 효과와 함께 위와 같은 메뉴버튼 툴팁이 출력됩니다.

* jTippy tooltip plugin - jQuery 툴팁 플러그인. 뛰어난 반응 형 배치로 사용 및 구성이 쉽습니다. 원하는 영역에 툴팁을 추가하여 문구를 보여주고 문구를 보여주는 동시에 hover, focus효과, background 에 대한 영역을 black, blur 와 같은 효과를 주어 툴팁을 더 돋보이게 만들 수 있습니다 * 사용방법 첨부된 압축파일을 다운받아 원하는 웹디렉터리에 압축을 해제후 html 문서상에 아래와 같은 형태로 코드를 삽입하도록 합니다 코드상단 css 추가 코드하단 js 추가 위와 같이 플러그인관련 css 및 js를 작성하고 본문 코드중단에 아래와 같이 툴팁효과들을 적용할 수 있습니다 툴팁 및 백그라운드 효과 위의 효과외에 툴팁영역을 작게 또는 크게, 컬러를 변경하는등..

- 라이센스 MIT - 사용 방법 1. 파일 상단에 jquery 라이브러리 파일과 jquery.sTips.min.js 파일 링크를 걸어줍니다. 2. 툴팁의 CSS 스타일을 추가합니다. 3. 툴팁이 적용될 객체에 Title 속성이나 Alt 속성을 추가하여 툴팁 메세지를 입력합니다. 4. sTips 플러그인을 호출합니다. 5. 툴팁을 여러개 사용해야 하는 경우 {||} 구분자를 넣어 내용을 다르게 설정할 수 있습니다. (데모 참고) 6. 툴팁 내용을 Ajax로 호출할 수도 있습니다. 7. 툴팁 내용을 Javascript 함수로 호출할 수도 있습니다. 8. 툴팁의 위치를 변경할 수 있습니다. (Default : 2) 1 : Top left 2 : Top right 3 : Bottom right 4 : Bott..

웹페이지에 간단하게 툴팁을 추가할수 있는 스크립트 입니다. 다운로드 받은 파일의 압축을 해제한 후 example/GetTip Example #1.html 라는 HTML문서를 웹브라우저로 열어보면 확인이 가능합니다. 마우스 오버시 상하좌우 어느쪽에 툴팁을 표시할것인지 정할수 있고, 얼마나 오랫동안 오버를 해야 나오는지 툴팁이 나온후에 어느 정도 유지하는지 시간을 제어할수가 있습니다. 마우스를 오버하거나, 입력박스에 포커스를 주거나, 특정 버튼을 클릭하거나 했을때 화면에 툴팁을 추가할 수 있습니다. 특정 객체에 툴팁을 추가하는 방법이 생각보다는 쉽네요. HTML 태그를 이용해서, 1. jquery 를 사용할 수 있게 추가하고, 2. js/jquery.gettip.js 를 이용하도록 추가합니다. 3. 툴팁이 ..

SVG 및 anime.js로 재미있는 툴팁 모양과 애니메이션으로 다양한 툴팁 소스를 제공하고 있습니다.. 12종의 툴팁을 제공하고 있으며 데모사이트에서 소스를 다운로드하여 사용하실 수 있습니다. 사이트 제작에 많음 도움이되길 바랍니다 ^^

css 만으로 작동하는 이미지 툴팁입니다. 텍스트에 마우스 오버시 이미지 툴팁이 보여집니다. 특징으로는 이미지뒤에 배경을 컨트롤 할수 있는 소스가 있습니다. 이미지가 배경위에 올려져있고 뒤 배경의 투명한 보더을 조절하여 배경이미지의 사이즈를 줄일수 있습니다. 사이즈를 줄임으로써 좀더 입체적인 효과를 낼수 있습니다.

FLEXBOX 와 같은 최신 CSS 속성을 사용한 간단한 툴팁 애니메이션 기능입니다. [데모보기] https://tympanus.net/Development/TooltipAnimations/

상하좌우 위치 조절이 가능한 Positioning Tooltips 부트스트랩을 이용한 툴팁기능으로 상하좌우 위치조절이 가능합니다. 간단하게 마우스롤오버 툴팁이 필요할때 유용합니다. 소스내 "data-placement" 속성값에 상하좌우 값을 이용하여, 마우스 롤오버시 툴팁 위치를 자유롭게 설정이 가능합니다. 간단하게 툴팁이 사용가능해서 여러모로 좋네요.

문서나 아이콘에 간단에게 적용이 가능한 텍스트 툴팁입니다. 해당사이트에서 html과 css 소스를 바로 확인할 수 있습니다. HTML 태그 를 타겟팅하여 작동합니다 .