jquery - Ajax 工具提示链接

Question

我对 ajax 工具提示 qtip2 有疑问。

我正在使用这个脚本（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'
    });

});

演示