shepherd-step not placed in proper position

[siddharthpolisiti]

Below is my code:

new sap.m.DateTimePicker('date1',{
            value:"2016-02-18-10-32-30",
            valueFormat:"yyyy-MM-dd-HH-mm-ss",
            minDate:new Date("2016-01-25"),
            maxDate:new Date("2016-08-25"),

}).addStyleClass("test").placeAt("body");

var tour;

tour = new Shepherd.Tour({
    defaults: {
        classes: 'shepherd-theme-arrows'
    }
});

tour.addStep('any-name', { 
    text: 'Example text',
    attachTo: '#date1',
    buttons: [
        {
            text: 'Next',
            action: tour.next
        }
    ]
});

tour.addStep('b-step', {
    text: 'Example 2',
    attachTo: 'body',
    buttons: [
        {
            text: 'Finish',
            action: tour.next
        },
      {
            text: 'Prev',
            action: tour.back
        }
    ]
});
$(document).ready(function() {

         tour.start();
  });

Here is the link to jsbin : http://jsbin.com/quhuku/edit?html,js,output

[mister-walter]

You need to provide a 'direction' in attachTo. i.e. '#date1 bottom'.

You can also use an object instead of a string for attachTo to make this more clear:
attachTo: {element: '#date1', on: 'bottom'}

Fixed jsbin: http://jsbin.com/pikefunaku/edit?html,js,output

[siddharthpolisiti]

@mister-walter Thanks for the clarification. That works.

[siddharthpolisiti]

Closing this as the solution provided by @mister-walter works perfectly.