CODEWITHSUNDEEP
jqueryqtip
CHarris
CHarris

Reputation: 2793

jquery, qtip...why isn't my tooltip working?

Here's my code:

<!DOCTYPE html>
 <html>
  <head>
   <script type="text/javascript" src="libraries/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" src="libraries/jquery.qtip-1.0.0-rc3.min.js"></script>
   <script>

     $('a_tip').qtip({
     content: 'This is an active list element',
     show: 'mouseover',
     hide: 'mouseout'
      })

   </script>
  </head>
<body>

 <div id = "a_tip">
  Want a tip?
 </div>

</body>

I have my jquery and qtip libraries in the right places - no errors in chrome console at all. I did my best following the tutorial on the qtip website, but can't see where I'm wrong. All I want is for the tooltip to show when the cursor is placed over 'Want a tip?' Thanks for any help!

Upvotes: 1

Views: 3093

Answers (2)

Ra&#250;l Ju&#225;rez
Ra&#250;l Ju&#225;rez

Reputation: 2159

You have to add the code when DOM is ready and your missing the # for an id selector, try something like this:

<script>
 $(function(){//When DOM is ready
    $('#a_tip').qtip({
      content: 'This is an active list element',
      show: 'mouseover',
      hide: 'mouseout'
    });
 });

</script>

Also add the following style to make the qTip appear:

<style>
  #a_tip{
     display:inline
  }
</style>

Upvotes: 1

techfoobar
techfoobar

Reputation: 66663

You have used the wrong selector. You need to use the #id selector.

$('#a_tip').qtip({ ... });

Secondly, to ensure that #a_tip exists when you do it, you need to do it on DOMReady event.

$().ready(function() {
    $('#a_tip').qtip({ ... });
});

Upvotes: 1

Related Questions