Joyride tourstop notices off by 200px

Question

I have set up joyride.js for a plugin I am creating so I can walk the user through some basic set up steps before using the plugin. I have it running/functioning correctly, but one thing I notice is that the 'Tour Stops' are about 200px or so lower than they should be.

Could this be due to a padding or margin on my elements? Is there a way to adjust this so that it appears next to the correct element? I have tried setting the tooltip to above, left and right and all of them are about 200 or so px lower than need be.

Joyride settings below:

jQuery(window).load(function() {
          jQuery("#TourList").joyride({ 
            autoStart : true,
            'tipLocation': 'right',         // 'top' or 'bottom' in relation to parent
            'nubPosition': 'auto', 
            // enable cookies to only run the joyride tutorial one time
            'cookieMonster': false,           // true/false for whether cookies are used
            'cookieName': 'JoyRide',         // choose your own cookie name
            'cookieDomain': false   
            });
        });

Answer 1

I eventually went in and changed the css in joyride-2.1.css

.joyride-tip-guide {
  position: absolute;
  background: #000;
  background: rgba(0,0,0,0.8);
  display: none;
  color: #fff;
  width: 300px;
  z-index: 101;
  top: 0; /* keeps the page from scrolling when calculating position */
  left: 0;
  font-family: "HelveticaNeue", "Helvetica Neue", "Helvetica", Helvetica, Arial, Lucida, sans-serif;
  font-weight: normal;
     -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
          border-radius: 4px;
  margin-top:-55px;           
}