Hopscotch는 링크드 인큐베이터 프로그램 중에 Gordon Koo와 Hans van de Bruggen이 오픈 소스 도구로 구축했습니다. 주요 목적은 사용성, 직관적 성 및 성능 문제를 해결하는 것이었습니다.

https://github.com/LinkedInAttic/hopscotch 

4.3k GitHub 스타를 사용하면 축소 및 gzipped 상태에서 8KB에 불과합니다. 의존성이 필요하지는 않지만 페이지에서 사용 가능한 경우 jQuery를 사용할 수 있습니다. Hopscotch는 다음을 제공합니다.

• 이벤트 콜백 : onStart, onNext 및 onClose 이벤트에 대한 콜백을 지원합니다.
• 다중 페이지 저항 : HTML5 세션 저장소를 사용하여 전체 페이지의 둘러보기 상태를 유지합니다.
• i18n : 국제화를 지원합니다.
• 간단한 설명 선 : 편리한 설명 선을 사용하여 설명 선을 관리합니다.
• 브라우저 호환성 : 모든 브라우저와 호환됩니다.
• 사용자 정의 가능 : CSS 조정, 버블 마크 업 및 페이지 상호 작용을 허용합니다.

설치하는 방법 

Grunt.js를 사용하여 Hopscotch를 빌드하십시오. 새로운 아티팩트로 테스트 스위트가 실행됩니다. 그런 다음 hopscotch.js 및 hopscotch.css라는 두 파일을 HTML 페이지에 포함하십시오.

사용하는 방법 

초기 설정이 완료되면 JSON을 사용하여 둘러보기를 초기화 할 수 있습니다.

// First define your tour.
var tour = {
  "id": "hello-hopscotch",
  "steps": [
    {
      "target": "profile-picture",
      "placement": "right",
      "title": "Profile Picture",
      "content": "This is your profile picture. Looking good!"
    },
    {
      "target": "find-conn",
      "placement": "bottom",
      "title": "Find Connections",
      "content": "The internet is always more fun when you connect with others. Find some connections by clicking here."
    }
  ]
};

// Then start the tour.
hopscotch.startTour(tour);

Hosscotch는 Jasmine 테스트 프레임 워크를 사용하여 테스트 할 수 있으며 Travis CI와 지속적으로 통합 할 수 있습니다.