Qtip2没有显示

Question

I'm working on qtip2 with jquery2 and based on the source code the tooltip actually gets created and added at the end of the page DOM/HTML like so:

<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>

Here is how the anchor is rendered (DOM/HTML changed to):

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

But when I hover over the link nothing gets shown.

My original code;

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

What could be wrong?

I'm also using the twitter bootstrap (with all included javascript plugins) and laravel4 blade templating system.

---

I downloaded my qtip2 from http://qtip2.com/v/stable/ and used both the minified version for css and js.
I have checked my source code and it has properly referenced both the css and the js file.

---

My Header:

{{ 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') }}

My JS found below everything:

{{ 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

You must be getting some error in the console. qtip relies on $.browser which was removed after 1.8.3 version of jquery.

See the code from qtip.js it must be failing on 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;
    }

Download jquery-migrate in git , to patch the backward compatibility and add it along.

here is a fiddle where it works after including jquery-migrate.

Demo