Qtip2没有出现

Question

我正在使用qtip2处理jquery2，并根据源代码实际创建工具提示并在页面末尾添加DOM/HTML，如下所示：

<div id="qtip-38" class="qtip qtip-default  qtip-pos-tl" tracking="false" role="alert" aria-live="polite" aria-atomic="false" aria-describedby="qtip-38-content" aria-hidden="true" style="display: none;"><div class="qtip-tip" style="background-color: transparent !important; border: 0px !important; height: 8px; width: 8px; line-height: 8px;"><canvas style="background-color: transparent !important; border: 0px !important;" height="8" width="8"></canvas></div><div class="qtip-content" id="qtip-38-content" aria-atomic="true">Hello</div></div>

下面是如何呈现锚点(DOM/HTML更改为)：

<a href="/wiki/Werner_Heisenberg" data-hasqtip="true" aria-describedby="qtip-38">Werner Heisenberg</a>

但是当我悬停在链接上时，什么也没有显示出来。

我的原始代码；

<a href="/wiki/Werner_Heisenberg">Werner Heisenberg</a>

有什么不对的？

我还使用了twitter引导程序(包括javascript插件)和laravel4刀片模板系统。

我从qtip2下载了我的http://qtip2.com/v/stable/，并同时使用了css和js的小型化版本。

我已经检查了我的源代码，它正确地引用了css和js文件。

我的标题：

{{ HTML::style('/bootstrap/css/bootstrap.css') }}
{{ HTML::style('/bootstrap/css/bootstrap-responsive.css') }}
{{ HTML::style('/js/qtip2/jquery.qtip.min.css') }}
{{ HTML::style('/js/datatables/css/jquery.dataTables.css') }}
{{ HTML::style('/bootstrap/css/style.css') }}

我的JS发现了下面的一切：

{{ HTML::script('//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js') }}
{{ HTML::script('/bootstrap/js/bootstrap.js') }}
{{ HTML::script('/js/qtip2/jquery.qtip.min.js') }}
{{ HTML::script('/js/datatables/jquery.dataTables.min.js') }}
{{ HTML::script('/js/initialize.js') }}

Initialize.js：

// Create the tooltips only on document load
$(document).ready(function()
{

        //this actually works with the carousel of twitter bootstrap
    $('#myCarousel').carousel({
        interval: 5000
    });
    $('#myCarousel').carousel('cycle');

        //this gets called too because the tooltip code is added to the site but it just doesn't show up when i hover on the link
    $('a').qtip({
        content: 'Hello'

    });


});

Answer 1

您一定是在控制台中出错了。qtip依赖于在1.8.3版本的jquery之后被删除的$.browser。

查看来自qtip.js的代码，它肯定是在moz = $.browser.mozilla,上失败了

function parseRadius(corner) {
        var isTitleTop = elems.titlebar && corner.y === TOP,
            elem = isTitleTop ? elems.titlebar : elems.content,
            moz = $.browser.mozilla, //<-- Failing here?
            prefix = moz ? '-moz-' : $.browser.webkit ? '-webkit-' : '',
            nonStandard = 'border-radius-' + corner.y + corner.x,
            standard = 'border-' + corner.y + '-' + corner.x + '-radius',
            css = function(c) { return parseInt(elem.css(c), 10) || parseInt(tooltip.css(c), 10); },
            val;

        whileVisible(function() {
            val = css(standard) || css(prefix + standard) || css(prefix + nonStandard) || css(nonStandard) || 0;
        });
        return val;
    }

下载jquery-在git中迁移，修补向后兼容性并将其添加进来。

这里有一个小提琴，它在包含jquery-迁移之后就可以工作了。

演示