pageguide.js는 웹 페이지의 요소에 대한 대화식 시각적 가이드입니다. 정적 도움말 메시지 또는 설명 텍스트로 인터페이스를 복잡하게 만드는 대신, 페이지 가이드를 추가하고 사용자가 새로운 기능에 대해 배울 수 있도록 합니다.

http://tracelytics.github.io/pageguide/ 

설치하는 방법 

다음 네 가지 방법 중 하나로 PageGuide를 설치할 수 있습니다.

• GitHub에서 최신 릴리스를 다운로드하십시오.
• 리포지토리 복제 : git clone https://github.com/tracelytics/pageguide.git
• Bower로 설치

bower install pageguide 

npm을 사용하여 설치

설치는 예제와 함께 로드되며 http : // localhost : 3000 / example /에서 Grunt를 사용하여 실행할 수 있습니다.

초기 설정의 경우 다음과 같이 pageguide.js 및 CSS 파일을 추가하십시오.

<script src="{YOUR_PATH}/pageguide.min.js"></sc
<link rel="stylesheet" href="{YOUR_PATH}/pageguide.css">

사용하는 방법 

PageGuide를 초기화하려면 HTML 파일에 다음 코드를 추가하십시오.

$(document).ready(function() {
    tl.pg.init({ /* optional preferences go here */ });
});

<ul>에서 선택기를 지정하면 텍스트를 표시하기 위해 PageGuide와 일치합니다. 아래는 pageguide.js를 페이지 하단에 추가하는 예입니다.

<ul id="tlyPageGuide" data-tourtitle="REPLACE THIS WITH A TITLE">
      <li class="tlypageguide_left" data-tourtarget=".first_element_to_target">
        <div>
          Here is the first item description. The number will appear to the left of the element.
        </div>
      </li>
      <li class="tlypageguide_right" data-tourtarget="#second_element_to_target">
        <div>
          Here is the second item description. The number will appear to the right of the element.
        </div>
      </li>
      <li class="tlypageguide_top" data-tourtarget=".third_element_to_target > div.is_here">
        <div>
          Here is the third item description. The number will appear above the element.
        </div>
      </li>
      <li class="tlypageguide_bottom" data-tourtarget="#fourth_element_to_target">
        <div>
          Here is the fourth item description. The number will appear below the element.
        </div>
      </li>
</ul>

PageGuide는 페이지에 정적 메시지를 표시하는 데 사용되므로 덜 복잡합니다.