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

[해피CGI][cgimall] 간단한 툴팁 JQuery 플러그인 - sTips 본문

웹프로그램밍 자료실/JAVA 자료

[해피CGI][cgimall] 간단한 툴팁 JQuery 플러그인 - sTips

해피CGI윤실장 2019. 10. 8. 09:09
- 라이센스

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 : Bottom left
  • 31 : Bottom right + from left to right
  • 32 : Bottom right+ from top to bottom



9. 플러그인의 기본 옵션은 다음과 같습니다.





- 작동 예제(기본)






홈페이지바로가기


Comments