Tooltipster вдруг не работает

Я баловался с плагинами jQuery для сайта, который я создаю, который требует всплывающих подсказок. Всплывающие подсказки используют AJAX для предоставления данных при наведении курсора, и все это работало нормально, пока я не добавил раздел всплывающей подсказки для элементов. После добавления кода и сохранения я заметил, что всплывающие подсказки и некоторые элементы jQuery больше не работают (плагин xbbcode также перестал работать, но начальная загрузка, средство выбора цвета и усиление по-прежнему работали нормально).

Я вернулся и удалил код, чтобы посмотреть, не сделал ли я там что-то не так, но ошибка все еще сохраняется! Я не изменил ничего, кроме дополнительной всплывающей подсказки, поэтому не понимаю, почему вдруг это не сработает. Вот используемый код, включая всплывающую подсказку элемента, которую я пытался добавить (в нижней части ориентации .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...';

    }
});
});

Я не вижу никаких видимых ошибок здесь, у меня были все мои скрипты плагинов в одном файле и минимизированы, чтобы минимизировать время загрузки, но, пытаясь выяснить, почему xbbcode и tooltipster внезапно не работают, я пошел дальше и перезагружал отдельные версии, Обычно в этом случае я подозреваю какую-то ошибку совместимости между tooltipster и xbbcode, но они работали очень хорошо до того, как была добавлена ​​всплывающая подсказка элемента, и когда я временно удалил xbbcode, чтобы посмотреть, начнут ли всплывающие подсказки работать снова, результат был тот же самый.

Источник

2 ответа

Решение

У вас есть несколько вопросов.

Относительно xbbcode

Вы, кажется, удалили вызов Javascript для фактической инициализации XBBCODE.

Добавление приведенного ниже в ваш javascript поможет разобраться:

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

Относительно всплывающей подсказки

  1. Вам нужно включить файл CSS, который можно скачать здесь
  2. Измените свой код инициализации на это:
  $('.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');
            }
        }
    });
Источник

Моя необразованность заключается в том, что объекты с классом "item" недопустимы для всплывающих подсказок.

Я мог бы сделать лучшее предположение, если бы я знал HTML-код.

Источник
Другие вопросы по тегам