홍페이지 HONGPAGE

  • 홈
  • 디자인
  • 개발
  • TIP
  • Link

ToolTip

개발/js·jquery
[jQuery] jquery ui를 이용한 tooltip 커스터마이징 (툴팁 배경색, 글자색 변경)

회원가입이나 폼 입력시에 해당 항목에 대한 상세한 설명이 필요한 경우, 상세하게 설명을 넣을수도 있지만 필요에 따라 볼 수 있게 툴팁으로 안내가 가능하다. 생일 옆에 느낌표 아이콘에 마우스를 대보면 해당 항목에 대한 상세 설명을 툴팁으로 띄워준다. 툴팁의 배경색상이나 폰트 컬러도 변경가능하다. jquery ui 파일 로드 일단 관련된 jquery ui파일을 로드한다. html 툴팁이 나오게할 아이콘 또는 요소를 넣는다. 툴팁 설명은 title=""안에 넣으면 된다. 여기서는 Font Awesome 을 활용하였는데, 꼭 Font Awesome이 아니더라도 input, img 등 다양하게 활용이 가능하다. 스크립트 삽입 위에 넣은 툴팁 아이콘 클래스명을 알맞게 넣어주고 tooltip() 스크립트를 넣어주면 ..

1
더보기
프로필사진

HONG

디지털노마드를 꿈꾸는
UI/UX Designer, Front-end Developer

Contact : heeehong@gmail.com

  • 분류 전체보기
    • 디자인
      • UX·UI
      • html·css
    • 개발
      • js·jquery
      • php
      • sql
      • 카페24
    • tip
    • 리뷰
    • 블로그
    • 글
    • [ 코드 판매 ]

최근글과 인기글

  • 최근글
  • 인기글




티스토리툴바