Question

Firstly, this is qtip, a jQuery plugin: http://craigsworks.com/projects/qtip2/ Basically it makes pretty tooltips.

I am using qtip on a mysql database result page, and the qtips work perfectly fine when I first load the page. However, I have sorting links on my page that cause the information inside a div to completely change (uses AJAX to put new info into the div by making a new mysql query that resorts the data and puts it in a table to replace the table on the page). When I click my sorting buttons, everything works except the qtips disappear. I use the qtips on the image captions (the “title”), so when I rollover the images on the sorted table, it’s back to the normal tooltip.

I believe what is wrong is that the $(document).ready means that the qtip stuff will only load on the first page load, therefore when I change the table, all the qtips disappear. I found a topic on the qtip forum that seems to be related to my problem (http://craigsworks.com/projects/forums/thread-solved-reload-qtip-with-new-items) and I tried everything in that topic, and I am on the latest version of qtip so I used on() instead of live() because live() is deprecated. It still didn’t fix it. Here is the code:

<script type="text/javascript">
jQuery(document).ready(function() {
    $('img[title]').on('mouseover', function() { 
        if( typeof( $(this).data('qtip') ) == 'object' ){ return; }
        $(this).qtip({
            content: {
                text: false
            },
            style: 'cream',
            position: {
                viewport: $(window)
            }
        });
        $(this).qtip('show');
    });
});
</script>

Answer 1

By storing the qTip settings, it will be easy to (re)initilise qTip with the same settings after new content has been loaded.

Without full sight of your javascript, I can’t be specific but something like this should do it :

jQuery(document).ready(function() {
    var qtipOptions = {
        content: { text: false },
        style: 'cream',
        position: { viewport: $(window) }
    };

    $('img[title]').qTip(qtipOptions);

    $("#myButton").on('click', function(){
        $.ajax({
            //...
            //...
            //...
            success(function(html){
                $("#mySelector").html(html);
                $('img[title]').qtip('destroy').qtip(qtipOptions);
            })
        });
    });
});