Trước khi đi vào hướng dẫn cài đặt và sử dụng Bootstrap Tourist các bạn có thể thử tiện ích này ngay sau đây

Để có thể tải Bootstrap Tourist các bạn có thể click vào đây hoặc truy cập vào Github Bootstrap Tourist. Tại đường link tải thư viện của tôi, tôi đã thêm vào một đối tượng MyTour để tối giản việc sử dụng Bootstrap Tourist hơn.

Hướng dẫn cài đặt
<link href="bootstrap.min.css" rel="stylesheet">
<link href="bootstrap-tour.min.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-tour.min.js"></script>

<!-- Phần mở rộng tôi viết thêm -->
<script src="bootstrap-tourist.extension.com.min.js"></script>

Ngoài ra phần mở rộng tôi viết có sử dụng linq.js mà tôi đã có bài viết Thư viện Linq.js trong javascript

Hướng dẫn sử dụng

Tại các element trên website, những chỗ mà các bạn muốn làm các hướng dẫn cho khách hàng (các bước trong tour) thì các element cần phải có các attribute sau đây

  1. data-tour-header: Tiêu đề của box hướng dẫn khi xuất hiện
  2. data-tour: Nội dung của box hướng dẫn khi xuất hiện
  3. data-tour-position: Vị trí hiển thị. Có 4 giá trị: left,right,bottom,top

Ví dụ như hướng dẫn hiển thị ở tiêu đề bài viết này

<h2 class="post-title text-danger tour-tourist-0-element" data-tour-header="Đây là tiêu đề bài viết" data-tour="Hướng dẫn sử dụng bootstrap tourist để làm trợ giúp cho phần mềm" data-tour-id="2244" data-tour-position="bottom">Hướng dẫn sử dụng bootstrap tourist để làm trợ giúp cho phần mềm</h2>

Tiếp đến các bạn gọi hàm trên javascript để thực thi

var tour = new MyTour({ area: $("body") });
tour.init();
$("[data-btn=StartTour]").click(function ()
{
    tour.start();
});

Ở đây tham số khi khởi tạo MyTour các bạn có thể tham khảo chi tiết Document tại https://github.com/IGreatlyDislikeJavascript/bootstrap-tourist. 

Đây là một số hình ảnh tôi sử dụng bootstrap-tourist trên phần mềm của tôi

Bấm vào nút dấu ? để bắt đầu tour

Thực hiện từng bước hướng dẫn

Rất dễ cho khách hàng đúng không các bạn

Chúc các bạn áp dụng tiện ích này vào sản phẩm của mình thành công

Sơn 20