jQuery - Producttour.js
Producttour.js é um plugin jQuery para implementação rápida e fácil do guia de ajuda em seu site.
Um exemplo simples de producttour.js conforme mostrado abaixo -
<!doctype html>
<html lang = "en" class = "no-js">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "css/reset.css">
<link rel = "stylesheet" href = "css/style.css">
<script src = "js/modernizr.js"></script>
</head>
<body background = "tp.png">
<div class = "cd-nugget-info">
<button id = "cd-tour-trigger" class = "cd-btn">Start tour</button>
</div>
<ul class = "cd-tour-wrapper">
<li class = "cd-single-step">
<span>Step 1</span>
<div class = "cd-more-info bottom">
<h2>Step Number 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Modi alias animi molestias in, aperiam.</p>
<img src = "img/step-1.png" alt = "step 1">
</div>
</li>
<li class = "cd-single-step">
<span>Step 2</span>
<div class = "cd-more-info top">
<h2>Step Number 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Officia quasi in quisquam.</p>
<img src = "img/step-2.png" alt = "step 2">
</div>
</li>
<li class = "cd-single-step">
<span>Step 3</span>
<div class = "cd-more-info right">
<h2>Step Number 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Optio illo non enim ut necessitatibus perspiciatis,
dignissimos.</p>
<img src = "img/step-3.png" alt = "step 3">
</div>
</li>
</ul>
<script src = "js/jquery-2.1.4.js"></script>
<script src = "js/jquery.mobile.min.js"></script>
<script src = "js/main.js"></script>
</body>
</html>Isso deve produzir o seguinte resultado -
Clique aqui