Tooltipster неожиданно не работает

Question

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

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

Answer 1

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

Что касается xbbcode

Вы, кажется, удалили вызов Javascript на самом деле инициализировать XBBCODE.

Добавление ниже вашего JavaScript будет сортировать, что из:

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

Что касается tooltipster

1. Вам необходимо включить файл CSS, который можно загрузить here
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'); 
      } 
     } 
    }); 

Answer 2

Мое необразованное состоит в том, что объекты с классом «элемент» недействительны для всплывающих подсказок.

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