Simple jQuery Website Tour Plugin - ddTour

ddTour is a simple and easy jQuery plugin for creating website tours that allow the visitor to walk through the web pages to learn about new features of your website.

How to use it:

1. Load the jQuery javascript library and the jQuery ddTour plugin at the bottom of your web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/ddTour.js"></script> 

2. Create a site tour using plain Html markup as follows.

<div class="main">

  <p><strong class="ddTour" style="position:relative;"><span>This is new feature 1</span>Feature 1</strong></p>
  
  <h3 class="ddTour" style="position:relative;"><span>This is new feature 2</span>Feature 2</h3>
 
  <h4 class="ddTour" style="position:relative;"><span>This is new feature 3</span>Feature 3</h4>

</div>

3. Initialize the plugin with one JS call.

$(document).ready(function(){
ddTour();
});

4. Style the text boxes of your site tour in the CSS.

.ddtextbox {
  width: 300px;
  height: auto;
  top: 50px;
  margin: 0;
  padding: 1em;
  position: absolute;
  z-index: 5000;
  background: #16766b;
  color: #e6e6e6;
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
}

.ddtextbox:before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 20px;
  border-bottom: 20px solid #16766b;
  border-bottom-color: #16766b;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}

.ddTour span { display: none; }

button,
.button {
  width: 100%;
  cursor: pointer;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: normal;
  line-height: normal;
  margin: 0 0 1.25rem;
  position: relative;
  text-decoration: none;
  text-align: center;
  display: inline-block;
  padding-top: 1rem;
  padding-right: 2rem;
  padding-bottom: 1.0625rem;
  padding-left: 2rem;
  font-size: 1rem;
  background-color: #fabb62;
  border-color: #f9b049;
  color: #8c2f06;
  -webkit-transition: background-color 300ms ease-out;
  -moz-transition: background-color 300ms ease-out;
  transition: background-color 300ms ease-out;
  padding-top: 1.0625rem;
  padding-bottom: 1rem;
  -webkit-appearance: none;
  border: none;
  font-weight: normal !important
}

button:hover,
button:focus,
.button:hover,
.button:focus { background-color: #f9b049 }

button:hover,
button:focus,
.button:hover,
.button:focus { color: #fff }

---

This awesome jQuery plugin is developed by david-j-davis. For more Advanced Usages, please check the demo page or visit the official website.