Step by Step example - All manual

Settings for this demo:

stepbystep-manual.js

  YAHOO.CH.stepByStepConfig = {
    autostart:false,
    autoplay:false,
    delay:1000,
    panelFade:true,
    fadeSpeed:500,
    nextLabel:'next >',
    prevLabel:'< prev',
    endLabel:'close',
    cancelLabel:'close',
    steps:[
      {
        id:'journey',
        orientation:'tl-bl',
        header:'Your checkout Journey',
        body:'At any time of the process you can see where you are and go back if you need to',
        width:'500px',
        time:4000
      },{
        id:'billing',
        orientation:'tl-tr',
        header:'Your billing address',
        body:'Enter your billing address',
        width:'200px',
        time:4000
      },{
        id:'sameAddress',
        orientation:'tl-tr',
        header:'Save yourself time',
        body:'If you don`t need a different delivery address, check this box',
        width:'200px',
        time:4000
      },{
        id:'delivering',
        orientation:'tl-tr',
        header:'Enter your delivery address',
        body:'Make sure to tell us the right country, as the delivery rate is dependent on that',
        width:'300px',
        time:4000
      },{
        id:'buttons',
        orientation:'tl-bl',
        header:'Make your choice',
        body:'You can always go back one step, save your information or go to the next step.',
        width:'500px',
        time:4000
      }
    ]
  };

Inline code:

(function(){
  var j = document.getElementById('journey');
  var link = document.createElement('a');
  link.id = 'manualstart';
  link.appendChild(document.createTextNode('Form help'))
  link.setAttribute('href','#journey');
  link.onclick = function(){
   YAHOO.CH.stepByStep.start();
   return false; 
  }
  j.parentNode.insertBefore(link,j);
}());