How I created the ToolTip Testimonial Popup

A client asked me about the testimonial popup featured over at Studio Press. When you hover over a picture at the top of our site your will see a tool tip appear.

I looked at the site and figured it was a custom js script to activate tooltip function from jQuery TOOLS. I then dropped Brian an email and asked if he did anything special (special as in custom post types etc…) besides just manually building out the section. He emailed me back and said NOPE, nothing special and here is the example file that is hooked into that section. I should mention how freaking awesome it is that Brian directly emails back and not some auto-responder response or no response at all.

Here is my testimonials.php file – create your own file and then mirror my code (use your own pictures and testimonials)

[php] <div id="testimonials">
<div class="wrap">
<h4>What They Say About Your Local Tech</h4>
<div class="testimonials">
<p class="center"><img class="frame" src="http://www.gravatar.com/avatar/120448eef8f54d4c8be5fb0eda92c71b?s=100" title="Loren from Your Local Tech Rocks! He’s my Hero! " alt="Linsey Planeta" /></p>
<p class="testimonials-title">Linsey Planeta</p>
<p class="company">RE Broker/Coach, Orange County, CA</p>
</div>
<div class="testimonials">
<p class="center"><img class="frame" src="https://yourlocaltech.com/wp-content/themes/eleven40/images/zengy.jpg" title="Loren is a Freakin ROCK STAR!" alt="Steve Zenghut" /></p>
<p class="testimonials-title">Steve Zenghut</p>
<p class="company">Zeek Interactive</p>
</div>
<div class="testimonials">
<p class="center"><img class="frame" src="https://yourlocaltech.com/wp-content/themes/eleven40/images/jeff-turner.jpg" title="Customer Support Gurus, Good Looking as well" alt="Jeff Turner" /></p>
<p class="testimonials-title">Jeff Turner</p>
<p class="company">Zeek/Real Estate Shows/MFFO</p>
</div>
<div class="testimonials">
<p class="center"><img class="frame" src="http://www.gravatar.com/avatar/b2e91667d43860cbd6d3644cdf070d00?s=100" title="Loren opened my eyes to WordPress and taught me how to do a lot on my own." alt="Irina Netchaev" /></p>
<p class="testimonials-title">Irina Netchaev</p>
<p class="company">Pasadena Views</p>
</div>
<div class="testimonials">
<p class="center"><img class="frame" src="https://yourlocaltech.com/wp-content/themes/eleven40/images/bob-watson.jpg" title="When I need Tech Help or WordPress help I call Your Local Tech" alt="Bob Watson" /></p>
<p class="testimonials-title">Bob Watson</p>
<p class="company">SMMOC / Watson and Associates / and more</p>
</div>
<div class="testimonials">
<p class="center"><img class="frame" src="https://yourlocaltech.com/wp-content/themes/eleven40/images/rob-hahn.jpg" title="Awesome Dude, Decent at Karaoke. Did I mention he was cool." alt="Rob Hahn" /></p>
<p class="testimonials-title">Rob Hahn</p>
<p class="company">The Notorious R.O.B.</p>
</div>
</div>
</div>
[/php]

Here is my custom.js

[code lang=”js”]
jQuery(document).ready(function(){

jQuery("#testimonials img[title]").tooltip({

// tweak the position
offset: [0, 0],

// use the "slide" effect
effect: ‘slide’

// add dynamic plugin with optional configuration for bottom edge
}).dynamic({ bottom: { direction: ‘down’, bounce: true } });

});
[/code]

Here is how I setup my functions.php
Besides adding jQuery TOOLs and hooking in my (StudioPress’s) custom JS code I also unhooked jQuery and then called it from Google API. Also in this bit of my functions is where I hook in the testimonials.php right after header.
[php]
add_action( ‘genesis_after_header’, ‘testimonials’ );

function testimonials() {
include (‘testimonials.php’);
}

add_action(‘wp_enqueue_scripts’, ‘custom_enqueue_scripts’);
function custom_enqueue_scripts() {
if (!is_admin()) {
wp_deregister_script(‘jquery’);

// load the local copy of jQuery in the footer
//wp_register_script(‘jquery’, ‘/wp-includes/js/jquery/jquery.js’, false, ‘1.7.2’, true);

// or load the Google API copy in the footer
wp_register_script(‘jquery’, ‘http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js’, ‘1.7.2’, true);
wp_enqueue_script(‘jquery’);
}

wp_register_script(‘jquery_tools’, ‘http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js?ver=3.4.1’, ‘jquery’, ‘3.4.1’, true);
wp_enqueue_script(‘jquery_tools’);

wp_register_script(‘tooltip’, get_stylesheet_directory_uri() . ‘/lib/custom.js’, ‘jquery’, ‘1’, true);
wp_enqueue_script(‘tooltip’);
}
[/php]