Search code examples
javascriptjqueryqtip2

qTip2 doesn't work


My code used to work until I dunno what i changed, I started everything from scratch yet it still doesn't show the tooltip, can someone tell me what's wrong with the code? or even better, is there any other (easier) way to implement a tooltip ?

<html>
<head>

<link type="text/css" rel="stylesheet" href="css/jquery.qtip.css" />    
<title>My site</title>
</head>
<body>
<a href="#">ZA</a>  
    <div id="jj" style="display: none;">HHHHHHH</div>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.qtip.js"></script>
    <script type="text/javascript">

        $('a').qtip({
        content: {
        text: $('#jj') // Add .clone() if you don't want the matched elements to be removed, but simply copied
    }
    })

</script>
</body>
</html>

Solution

  • Aren't you missing the onload?

    <script type="text/javascript">
    $(function() {
        $('a').qtip({
            content: {
                text: $('#jj') 
            }
        });
    });
    </script>
    

    Edit: the code above most definitely works, see jsfiddle

    Make sure your qtip.js and qtip.css are loaded and recent