ddTour - A Simple jQuery site tour solution

ddTour is a simple uncomplicated lightweight site tour jQuery solution.

• Unlike other tour solutions you keep your code in one place. The tooltip pops up right where you have a description of it.
• Traverse to any element by designated class selector
• This is a simple grunt stupid solution as they say in the Marine Corps.

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: github.com

1. INCLUDE JS FILES

<script src="js/min/plugins-min.js"></script>
<script src="js/ddTour.js"></script>

2. HTML

<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. JAVASCRIPT

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

4. CSS

.mytooltip {
    width: 300px;
    height: auto;
    margin-top: 65px;
    padding: 1em;
    position: absolute;
    z-index: 5000;
    background:#16766b;
    color: #e6e6e6;
    font-size: 0.6em;
    display: none;
    
}

.mytooltip:before {
   content: "";
   position: absolute;
   bottom: 100%;
   left: 25px;
   border-bottom: 20px solid #16766b;
   border-bottom-color: #16766b;
   border-left: 20px solid transparent; 
   border-right: 20px solid transparent; 
}
.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}