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')将为其选择所有锚标记和设置工具提示。相反，只需添加/使用属性来sepcify您需要工具提示的锚点。对于需要显示工具提示的锚点，请添加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

Ajax-Tooltips链接

1 个答案: