Webmaster Forum

Webmaster Forum (http://www.v7n.com/forums/index.php)
-   Coding Forum (http://www.v7n.com/forums/forumdisplay.php?f=16)
-   -   Adding jquery tooltips to wordpress (http://www.v7n.com/forums/showthread.php?t=337127)

virtualgeorge 03-21-2013 08:18 PM

Adding jquery tooltips to wordpress
 
I was screwing around with jquery tooltips and created this simple sample page:
Mouse over the address or the map photo to see tooltip.
http://virtualgeorge.info/test4/test.html

So now I want to use that on a wordpress site. If you view the source I figured I would need to add this to the header.php:
Code:

<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
However, looking at my wordpress page source maybe it should be like this instead?
Code:

<script type='text/javascript' src='http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js'></script>

Add the css on that page to my style.css

Then add the javascript above the </body> tag in the the footer.php
Code:

<script>
  $(document).ready(function() {
      $("#download_now").tooltip({ effect: 'slide'});
    });
</script>
<script>
  $(document).ready(function() {
      $("#download_now2").tooltip({ effect: 'slide'});
    });
</script>

So then should I be able to use the same html to one of my pages or put it in the footer

Code:

<p align="center">
  <!-- trigger element. a regular workable link -->
  <a href="#" id="download_now">23650 N. 35th Dr. #100<br />
  Glendale, AZ 85310</a></p>
  <!-- tooltip element -->
<div class="tooltip"><a href="http://goo.gl/maps/R2X6D" target="_blank"><div class="tttext">Click to View Map
  or Get Directions</div></a><a href="http://goo.gl/maps/R2X6D" target="_blank"><img src="clear.png" style="margin-top:-20px; position:absolute; right:0;" width="120" height="120" /></a> </div>

But my tooltips didn't pop up so could it be the order that the jquery is called in the header or maybe my css needs to be altered if it ends up being inside of other containers in my wordpress site instead of that simple page?

I can put up a sample page if needed?

thx

lordspace 03-21-2013 08:47 PM

With WordPress you should use jQuery instead of $
See the console in firebug (F-12) in firefox

virtualgeorge 03-21-2013 10:23 PM

Quote:

Originally Posted by lordspace (Post 2000023)
With WordPress you should use jQuery instead of $
See the console in firebug (F-12) in firefox

Sorry but could you elaborate on that just a little?
I am not exactly sure what you mean? If I try it in wordpress will firebug show what the error is & how to correct it?

thx!

lordspace 03-22-2013 04:45 PM

see this:
http://www.ericmmartin.com/5-tips-fo...ith-wordpress/

and this
http://www.ericmmartin.com/5-tips-fo...ith-wordpress/

make sure you use jQuery because WordPress uses $ for another library.


All times are GMT -7. The time now is 05:10 AM.

3.8.7