jQuery UI tooltip в wordpress site

Question

Попытка получить всплывающую подсказку, работающую с изображением вместо текста. Насколько это работает с текстом на моем сайте.

<a id="thisId" href="#" title="hello world" >ALOHA!</a> 

<script> 
    jQuery(document).ready(function(){ 
     jQuery('#thisId').tooltip(); 
    }); 
</script> 

Это прекрасно работает. Он отображает «привет мир» при наведении ссылки.

Но если я попробую следующее; working jsfiddle example, но на моем сайте WP он терпит неудачу, просто не показывая ничего. Почему это может быть?

Answer 1

Это происходит главным образом потому, что ваша тема WordPress автоматически использует Bootstrap, который имеет свои собственные всплывающие подсказки. Его всплывающие подсказки также используют ту же самую функцию tooltip(), поэтому это просто конфликт имен между JQuery UI & BootStrap.

Чтобы исправить это, вы можете принудительно переименовать всплывающую подсказку() функции, используемые в JQuery Ui, как это:

jQuery.widget.bridge('jQueryUITooltip', jQuery.ui.tooltip); 

И теперь использование jQueryUITooltip() вместо подсказки(), чтобы инициализировать подсказки JQuery UI, пример:

jQuery(document).ready(function(){ 
    jQuery('#thisId').jQueryUITooltip({ 
     track: true 
    }); 
});