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 は$.browser、1.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 に答える