CODEWITHSUNDEEP
javascriptjqueryqtip2
user1115538
user1115538

Reputation:

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>

Upvotes: 2

Views: 1547

Answers (5)

user2033297
user2033297

Reputation: 1

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<link type="text/css" rel="stylesheet" href="Scripts/qTip/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-2.1.1.min.js"></script>
    <script type="text/javascript" src="Scripts/qTip/jquery.qtip.js"></script>
    <script type="text/javascript">
        $(function () {
            $('a').qtip({
                content: {
                    text: $('#jj')
                }
            });
        });
</script>
</body>
</html>

Upvotes: 0

Razor
Razor

Reputation: 29728

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

Upvotes: 1

Rafay
Rafay

Reputation: 31043

two things that you can try

  1. move the scripts to your head section

  2. wrap the javascript/jquery code inside the ready handler 

    $(document).ready(function(){

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

Upvotes: 0

Patricia
Patricia

Reputation: 7802

you need to put your qtip javascript inside a document ready.

$(function() {
    $('a').qtip({
        content: {
             text: $('#jj').clone()
         }
    });
});

Upvotes: 1

Blazemonger
Blazemonger

Reputation: 93003

Try this instead:

$('a').qtip({
    content: $('#jj').text()
});

Or do what the comment said and clone the element -- you'll probably have to show it explicitly:

$('a').qtip({
   content: {
      text: $('#jj').clone().show()
   }
});

Upvotes: 1

Related Questions