1

我正在使用 jquery2 处理 qtip2，并且基于源代码，工具提示实际上是在页面 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 刀片模板系统。

我从http://qtip2.com/v/stable/下载了我的 qtip2，并使用了 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') }}

初始化.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'

    });


});
4

1 回答 1

0

您一定在控制台中遇到了一些错误。qtip 依赖于$.browser1.8.3 版本的 jquery 之后被移除。

请参阅 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;
    }

在git中下载 jquery-migrate ，以修补向后兼容性并添加它。

这是一个小提琴，它在包含 jquery-migrate 之后可以工作。

演示

于 2013-05-24T03:33:40.217 回答