Joyride tourstop notices off by 200px - zurb-joyride

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;
}