Ajax-Tooltips Ссылки

Question

У меня проблема с подсказками ajax qtip2.

I'm, используя этот скрипт (http://jsfiddle.net/craga89/L6yq3/):

// Create the tooltips only when document ready 
$(document).ready(function() 
{ 
// MAKE SURE YOUR SELECTOR MATCHES SOMETHING IN YOUR HTML!!! 
$('a').each(function() { 
    $(this).qtip({ 
     content: { 
      text: 'Loading...', 
      ajax: { 
       url: 'http://qtip2.com/demos/data/owl', 
       loading: false 
      } 
     }, 
     position: { 
      viewport: $(window) 
     }, 
     style: 'qtip-wiki' 
    }); 
}); 
}); 

А вот ссылка на подсказке:

<a href='http://qtip2.com/demos/data/snowyowl'>Snowy Owl</a> 

Проблема заключается в том, что каждая ссылка на страницу содержания, где я Используя этот скрипт, пытается загрузить всплывающую подсказку. Даже если я нахожусь над пунктами меню (которые, конечно же, являются ссылками), он пытается загрузить всплывающие подсказки ajax. Зачем?

Answer 1

Ваш селектор является слишком общим, $('a') выберет все теги привязки и подсказки для установки. Вместо этого просто добавьте/используйте атрибут для определения того, для какого якоря вам нужна подсказка. скажем, для якорей, которые должны показать всплывающую подсказку, добавьте атрибут rel="tooltip" и настройте всплывающие подсказки только для этих.

например:

<a rel="tooltip" href='http://qtip2.com/demos/data/snowyowl'>Show tooltip</a> 

и вы можете просто написать его как (Вам не нужно использовать каждый)

$(document).ready(function() { 
    // MAKE SURE YOUR SELECTOR MATCHES SOMETHING IN YOUR HTML!!! 
    $('a[rel="tooltip"]').qtip({ 
     content: { 
      text: 'Loading...', 
      ajax: { 
       url: 'http://qtip2.com/demos/data/owl', 
       loading: false 
      } 
     }, 
     position: { 
      viewport: $(window) 
     }, 
     style: 'qtip-wiki' 
    }); 

}); 

Demo