title: Qtip tooltips not appearing
body: <p>I made the navbar on the top of my page static (the rest of the page is dynamic)</p>
  
  <p>The navbar is in a div that is given the ID "header" and and everything else is in a div with the ID "main".</p>
  
  <p>I use this code to make tooltips.</p>
  
  <p>This is the Javascript/jquery/qtip</p>
  
  <pre><code>$(document).ready(function() {
  //Tooltips
      $(".tiptrigger").hover(function(){
          tip = $(this).find('.tip');
          tip.show(); //Show tooltip
      }, function() {
          tip.hide(); //Hide tooltip
      }).mousemove(function(e) {
          var mousex = e.pageX + 20; //Get X coodrinates
          var mousey = e.pageY + 20; //Get Y coordinates
          var tipWidth = tip.width(); //Find width of tooltip
          var tipHeight = tip.height(); //Find height of tooltip
  
          //Distance of element from the right edge of viewport
          var tipVisX = $(window).width() - (mousex + tipWidth);
          //Distance of element from the bottom of viewport
          var tipVisY = $(window).height() - (mousey + tipHeight);
  
          if (tipVisX &lt; 20) { //If tooltip exceeds the X coordinate of viewport
              mousex = e.pageX - tipWidth - 20;
          } if (tipVisY &lt; 20) { //If tooltip exceeds the Y coordinate of viewport
              mousey = e.pageY - tipHeight - 20;
          }
          //Absolute position the tooltip according to mouse position
          tip.css({  top: mousey, left: mousex });
     });
  });
  
  $(document).ready(function() {
  //Tooltips
      $(".tipheader").hover(function(){
          tip = $(this).find('.tip');
          tip.show(); //Show tooltip
      }, function() {
          tip.hide(); //Hide tooltip
      }).mousemove(function(e) {
          var mousex = e.pageX + 30; //Get X coodrinates
          var mousey = e.pageY + -20; //Get Y coordinates
          var tipWidth = tip.width(); //Find width of tooltip
          var tipHeight = tip.height(); //Find height of tooltip
  
          //Distance of element from the right edge of viewport
          var tipVisX = $(window).width() - (mousex + tipWidth);
          //Distance of element from the bottom of viewport
          var tipVisY = $(window).height() - (mousey + tipHeight);
  
          if (tipVisX &lt; 20) { //If tooltip exceeds the X coordinate of viewport
              mousex = e.pageX - tipWidth - 20;
          } if (tipVisY &lt; 20) { //If tooltip exceeds the Y coordinate of viewport
              mousey = e.pageY - tipHeight - 20;
          }
          //Absolute position the tooltip according to mouse position
          tip.css({  top: mousey, left: mousex });
      });
  });
  </code></pre>
  
  <p>Then this is the CSS</p>
  
  <pre><code>.tip {
      color: #fff;
      background: #1d1d1d;
      display: none; /*--Hides by default--*/
      padding: 10px;
      position: absolute;    
      z-index: 1000;
      -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
      border-radius: 6px;
      }
  </code></pre>
  
  <p>This is the HTML that calls the tooltip.
  The first line is for the main section, the second is for the header.</p>
  
  <pre><code>&lt;a href="LINK URL" class="tiptrigger"&gt;&lt;img src="IMAGE URL" alt="" /&gt;&lt;span class="tip"&gt;CONTENT&lt;/span&gt;&lt;/a&gt;
  &lt;a href="LINK URL" class="tipheader"&gt;&lt;img src="IMAGE URL" alt="" /&gt;&lt;span class="tip"&gt;CONTENT&lt;/span&gt;&lt;/a&gt;
  </code></pre>
  
  <p>The reason I used two different javascript sections is because the tooltips in the header and the tooltips in the main section needed different parameters.</p>
  
  <p>Now, the problem is that the tooltips work fine in the header, but they're not working in the main section and I can't think of any possible reason why, I tried everything I could think of and it's not working. Does anyone else know how to fix it?</p>