Question

I have a site that displays items, 12 items per page and I can paginate through the pages using jquery. On the same page I implemented a the tooltip feature with qTip.

Hovering over the items some information appear. That works until I use the paginator to go to the next page.

The pagination reloads the content. But it has the same structure as when I refresh the page.

Here’s my code:

$(document).ready(function() {
 $(".cornerize").corner("5px");
 $('a#verd').live('click', exSite);
 $("a.tp").live('click', thumpsUp);
 $("a#next").click(getProgramms);
 $("a#previous").click(getProgramms);
 $("a#page").each(function() {
  $(this).click(getProgramms);
 });

 $('a.ppname[rel]').each(function(){

    $(this).qtip( {
     content : {url :$(this).attr('rel')},
     position : {
      corner : {
       tooltip : 'leftBottom',
       target : 'rightBottom'
      }
     },
     style : {
      border : {
       width : 5,
       radius : 10
      },
      padding : 10,
      textAlign : 'center',
      tip : true, 
      name : 'cream' 
     }

    });
   });

 });

The html/dom does not change:

<a class="ppname" rel="link" href="#">...</a>

qTip takes from every a.ppname the rel value end loads the content.

Answer 1

This is happening because new elements are not automatically “qTiped” when they are loaded after page load. For regular events, you would have to use .live() instead of .bind().

This has been solved before (judging from the comment): Problem with qTip – Tips not showing because elements load after the script.

The correct way to do it is (from that answer):

$('a.ppname[rel]').live('mouseover', function() {
    var target = $(this);
    if (target.data('qtip')) { return false; }

    target.qtip({
        overwrite: false, // Make sure another tooltip can't overwrite this one without it being explicitly destroyed
        show: {
            ready: true // Needed to make it show on first mouseover event
        },
        content : {url :$(this).attr('rel')},
        position : {
            corner : {
                tooltip : 'leftBottom',
                target : 'rightBottom'
            }
        },
        style : {
            border : {
            width : 5,
            radius : 10
        },
        padding : 10,
        textAlign : 'center',
        tip : true, 
        name : 'cream' 
    });

    target.trigger('mouseover');
});