Tooltipster suddenly not working

Question

I've been dabbling with jQuery plugins for a site I'm building that requires tooltips. The tooltips use AJAX to supply data when hovered and it was all working fine and dandy until I added a tooltip section for items. After adding the code and saving, I noticed tooltips and some of the jQuery elements weren't working anymore (the xbbcode plugin also stopped working, but bootstrap, a color picker, and amplify still were working fine).

I went back and removed the code to see if I had done something wrong there but the error still persists! I didn't change anything else other than the additional tooltip so I don't understand why all of a sudden it won't work now. Here is the code used, including the item tooltip I was trying to add (at the bottom targeting .item ).

$(document).ready(function() {

// Retrieve stored data
var bannerData = amplify.store("banner");
var haData = amplify.store("ha");
var petData = amplify.store("pet");

if (bannerData === true) {
    $('#banner').addClass('hidden');
    $('#banner-collapse').text("Expand [+]");
}

if (haData === true) {
    $('#ha').addClass('hidden');
    $('#collapse-ha').text("Expand Avatar [+]");
}

if (petData === true) {
    $('#pet').addClass('hidden');
    $('#collapse-pet').text("Expand Pet [+]");
}

// Section collapse
$('#banner-collapse').click(function () {
    if (bannerData === true) {
        $('#banner').slideToggle(function () {
            $(this).removeClass("hidden");
        });

        amplify.store("banner", null);
        $(this).text(function(i, text) {
            return text === "Expand [+]" ? "Collapse [-]" : "Expand [+]";
        });
    }

    else {
        $('#banner').slideToggle();
        amplify.store("banner", true);
        $(this).text(function (i, text) {
            return text === "Collapse [-]" ? "Expand [+]" : "Collapse [-]";
        });
    }
});

// Avatar Collapse
$('#collapse-ha').click(function () {
    if (haData === true) {
        $('#ha').slideToggle(function () {
            $(this).removeClass("hidden");
        });

        amplify.store("ha", null);
        $(this).text(function(i, text) {
            return text === "Expand Avatar [+]" ? "Collapse Avatar [-]" : "Expand Avatar [+]";
        });
    }

    else {
        $('#ha').slideToggle();
        amplify.store("ha", true);
        $(this).text(function (i, text) {
            return text === "Collapse Avatar [-]" ? "Expand Avatar [+]" : "Collapse Avatar [-]";
        });
    }
});

// Pet Collapse
$('#collapse-pet').click(function () {
    if (petData === true) {
        $('#pet').slideToggle(function () {
            $(this).removeClass("hidden");
        });

        amplify.store("pet", null);
        $(this).text(function(i, text) {
            return text === "Expand Pet [+]" ? "Collapse Pet [-]" : "Expand Pet [+]";
        });
    }

    else {
        $('#pet').slideToggle();
        amplify.store("pet", true);
        $(this).text(function (i, text) {
            return text === "Collapse Pet [-]" ? "Expand Pet [+]" : "Collapse Pet [-]";
        });
    }
});

//Formats date
var now = moment().format("dddd, MMMM Do, <b>h:mm A</b>");
$('#date').append(now);

// Tooltips
$('.tooltip-ha').tooltipster({
    animation: 'grow',
    delay: 200,
    trigger: 'hover',
    position: 'right',
    contentAsHTML: true,
    functionInit: function(origin, content) {
        // when the request has finished loading, we will change the tooltip's content
        $.ajax({
            type: 'GET',
            url: '/haTooltip',
            success: function(data) {
                origin.tooltipster('content', data);
            }
        });

        // this returned string will overwrite the content of the tooltip for the time being
        return 'Wait while we load new content...';

    }
});

$('.tooltip').tooltipster({
    animation: 'grow',
    delay: 200,
    trigger: 'hover',
    position: 'right',
    contentAsHTML: true,
    functionInit: function(origin, content) {
        // when the request has finished loading, we will change the tooltip's content
        $.ajax({
            type: 'GET',
            url: '/petTooltip',
            success: function(data) {
                origin.tooltipster('content', data);
            }
        });

        // this returned string will overwrite the content of the tooltip for the time being
        return 'Wait while we load new content...';

    }
});

$('.item').tooltipster({
    animation: 'grow',
    delay: 200,
    trigger: 'hover',
    position: 'right',
    contentAsHTML: true,
    functionInit: function(origin, content) {
        // when the request has finished loading, we will change the tooltip's content
        $.ajax({
            type: 'GET',
            url: '/itemTooltip',
            success: function(data) {
                origin.tooltipster('content', data);
            }
        });

        // this returned string will overwrite the content of the tooltip for the time being
        return 'Wait while we load new content...';

    }
});
});

I don't see any visible errors here, I had all my plugin scripts in one file and minified to minimize load time, but in trying to figure out why xbbcode and tooltipster suddenly don't work, I went ahead and redownloaded the separate versions. Normally in this case, I'd suspect some sort of compatibility error between tooltipster and xbbcode, but they had worked just fine before the item tooltip was added and when I temporarily removed xbbcode to see if the tooltips would start working again, the result was the same.

Answer 1

You have a few issues.

Regarding xbbcode

You seem to have removed the Javascript call to actually initialize XBBCODE.

Adding the below to your javascript will sort that out:

   $('.bbcode').each(function(){
       var $this = $(this);
       var myText = $this.html();
       var result = XBBCODE.process({
            text: myText
        }); 
       $this.html(result.html);
   });

Regarding tooltipster

1. You need to include the CSS file which can be downloaded here
2. Change your initialization code to this:

---

  $('.item').tooltipster({
        content: 'Loading...',
        updateAnimation: false,
        functionBefore: function(origin, continueTooltip) {
            continueTooltip();

            if (origin.data('ajax') !== 'cached') {

                // when the request has finished loading, we will change the tooltip's content
            $.ajax({
                type: 'POST', 
                url: 'http://dodsoftware.com/sotests/xbbcode/itemTooltip', // change to your file location
                success: function(data) {
                    origin.tooltipster('content', data);
                },
                error: function(jqXHR, textStatus, errorThrown) {
                     console.log(textStatus, errorThrown);
                }
            });
                origin.data('ajax', 'cached');
            }
        }
    });

Answer 2

My uneducated is that the objects with the class "item" are not valid for tooltips.

I would be able to make a better guess if I knew the HTML code.