It’s cuter and easier than it sounds! :) This is a quick tutorial for how to spice up your Members area with a little bit of jQuery magic. We will be displaying some featured members in the sidebar of our member directory and then grabbing some random user data to display in a tooltip when mousing over the avatars.

You can see a live DEMO of this in action on one of my test installations. I am using the BuddyPress Corporate theme in its default color scheme.

When you refresh the page, not only do you get a different set of random users, but you also get new random data for each user. There are so many uses for this code. With a little bit of tweaking you can set it to display the most recent status update for each user inside the tooltip, the number of friends a user has, a specific portion of their profile, their author bio, a larger version of their avatar – just about anything. One main advantage of this technique is that it allows you to conserve space on the page. You have the ability to present more data in a more interactive way. Let’s get started!

Step 1: Use an existing installation of WPMU/BuddyPress or create a new one with a few test users.

Step 2: Go to BuddyPress >> Profile Field Setup and add some custom profile fields so that you will have random data to display.

Step 3: Add jQuery and jQuery tools to the header.php of your theme:

<!-- Full version of jQuery Tools + jQuery 1.3.2 -->
	<script src="http://cdn.jquerytools.org/1.1.2/full/jquery.tools.min.js">
	<link rel="stylesheet" href="/css/tooltip.css">

Step: 4: Initialize the function in the of the header.php file that your theme uses.

(This executes your script when your document is ready – how cute is that? :) It also allows us to specify some effects and positioning. There are quite a few more options available than what I’m using here.

<script>
$(document).ready(function() {
	// enable tooltip for "trigger" element. use the "slide" effect
	$(".trigger").tooltip({ effect: 'slide',
	 position: 'center left',
	});
});
</script>

Step 5: Add a little bit of basic CSS for the tooltip:

/* mouseover state */
.trigger:hover {
	background-position:0 -44px ;
}
/* clicked state */
.trigger:focus {
	background-position:0 -88px;
}
/* tooltip styling */
.tooltip {
	display:none;
	background:url(images/tooltip/white_big.png);
	height:133px;
	padding:40px 30px 10px 30px;
	width:310px;
	font-size:13px;
	color:#fff;
}
/* a .label element inside tooltip */
.tooltip .label {
	color:yellow;
	width:35px;
}
.tooltip a {
	color:#ad4;
	font-size:11px;
	font-weight:bold;
	text-decoration: none;
}

Step 6: Add the Markup to Make it Work!

The tooltip utilizes two two key triggers. Here is a simple example of markup:

<!-- trigger element. a regular workable link -->
<a class="trigger" title="System tooltip for search engines">Download now</a>
<!-- tooltip element -->
<div class="tooltip">
        <img src="http://static.flowplayer.org/img/title/eye.png" alt="Flying screens"
                style="float:left;margin:0 15px 20px 0" />
        <table>
                <tr>
                        <td class="label">File</td>
                        <td>flowplayer-3.1.5.zip</td>
                </tr>
                <tr>
                        <td class="label">Date</td>
                        <td>2009-10-24</td>
                </tr>
                <tr>
                        <td class="label">Size</td>
                        <td>112 kB</td>
                </tr>
                <tr>
                        <td class="label">OS</td>
                        <td>all</td>
                </tr>
        </table>
        <a href="/blog/36">New features in 3.1</a>
</div>

Please note that If you’re only using the tooltip in only one place you may want to use an ID to trigger it. If you plan to use it in multiple places on the page, you must change the trigger ID to a class , as well as changing it in your header.php and in your CSS files. When working in BuddyPress your markup might look a little something like this:

<div id="members-directory-featured" class="directory-featured">
		<h3><?php _e( 'Featured Members', 'buddypress' ) ?>
			<ul id="featured-members-list" class="item-list">
			<?php while ( bp_site_members() ) : bp_the_site_member(); ?>
				<li>
				<div class="item-avatar trigger">
						<a href="<?php bp_the_site_member_link() ?>">
<?php bp_the_site_member_avatar() ?></a>
					</div>
					<!-- tooltip element -->
<div class="tooltip">
<div class="item-title">
<div class="namelink"><a href="<?php bp_the_site_member_link() ?>">
<?php bp_the_site_member_name() ?></a><br/>
<a href="<?php bp_the_site_member_link() ?>">
<?php bp_the_site_member_avatar() ?></a></div>
<div class="randomdata">
<?php bp_the_site_member_random_profile_data() ?></div>
</div>
</div>

The most important thing to remember is that the < div > for the tooltip must be located directly after the one that acts as the mouseover trigger. Your members area won’t look exactly like mine, but this markup should point you in the right direction. You may also view the source on my test site.

My primary resource for the tooltip portion was: http://flowplayer.org/tools/demos/tooltip/index.html.

There you can find numerous variations for the tooltip placement, size, effects and instructions on how to use it in forms and tables. Currently there are a lot of BuddyPress installations that look very similar to each other so in the upcoming posts we’ll be covering different ways that will help you make your community site stand out from the crowd. I hope you enjoy playing around with some of these effects! Drop us a comment and let us know where you’ve put javascript to good use with BuddyPress.