A cool hover effect for your BuddyPress members avatars

A few members at the BuddyPress forum asked me about the hover effect I use on Cureuphoria to display the members names when you mouse over the avatars.

So I decided to write a tutorial for anyone who'd like to have the same on their BuddyPress site.

The image below shows an example of what the effect looks like once implemented.

buddypress hover effect

You can also see it in action on the website itself, of course.

I believe it's something pretty simple to achive, and the result is quiet practical for the user.
As you suspect, it's jQuery to take care of the magic on this one.

More specifically, it's a jQuery plugin called tipsy. So, first of all, get the plugin by downloading it here.

Once you did so, do the following:

  • Upload the jquery.tipsy.js file on your theme directory
  • Put the tipsy.gif image, into the "images" folder of your theme

After that, copy all the content from the tipsy.css file and paste it into your "style.css" file.

Than edit the background image path, in the first line:


background-image: url(images/tipsy.gif);

Now it's time to setup the jQuery stuff.

Open the header.php file and find this:


<?php wp_head(); ?> 

Replace it with:


<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>
 
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/jquery.tipsy.js"></script>
<script type="text/javascript">
	var $j = jQuery.noConflict();
	$j(document).ready(function() {
	    $j('#members-avatars a').tipsy({gravity: 's'});
	});
</script>

The wp_enqueue_script("jquery"); function loads the jQuery library that is included within WordPress itself.

Than we load the tipsy jQuery plugin, and right after that, the script for the plugin to work;

Notice that we used jQuery in no-conflict mode, to avoid any possible conflict with other Javascript libraries.

Now, the way tipsy work is to display a tooltip with the value of the "title" attribute of the element that you target in the script. In our case, "#members-avatars a".

That implies that, as last action, you need to wrap those avatars members images with such a div with an id of "members-avatars".

Also, the value for the title attribute should output the name of the member, so we use the bp_member_name() function as value.

The whole widget code, should look something like this:


<?php if ( bp_has_members('type=active&max=15') ) : //members widget ?>

<div id="members-avatars"> 
    <h2>Members</h2>
						
        <?php while ( bp_members() ) : bp_the_member(); ?>
		<a href="<?php bp_member_permalink() ?>" title=" <?php bp_member_name() ?>">
               <?php bp_member_avatar() ?></a>
	<?php endwhile; ?>
						
</div><!-- end "members-avatars" -->

<?php endif; //members wdget ?>

To make it look better, I changed the font size in the CSS code I copied from the tipsy.css from 10px to 13px. If you wish, you can also play with the opacity of the tooltip bubble in the CSS.

As a bonus tip, you can use the same tooltip effect on other parts of the interface, like I did for the activity main menu, for example.

To achieve this, add a new target (div#members-avatars a) in the tipsy script:


<script type="text/javascript>
    $(document).ready(function() {
        $('div.activity-type-tabs a, div#members-avatars a').tipsy({gravity: 's'});
   });
</script>

So, there you have it, simple but efficient and cool hover effect to display the members name when passing your mouse over the members avatars.

Feel free to implement it on your BuddyPress site!
And let me know if you did use it.

3 Comments

Subscribe to comments by rss.

  • Nahum

    Apr 20, 2010

    Nice one! Thanks for sharing. Very good for users to learn how to navigate many of the bp features and links.

  • James

    Jan 23, 2011

    hi, tried to implement hover efect as described in tutorial, did not work for me, maybe some my own mistake. Actually, have other question, on Cureuphoria you have hover efect which looks like default from browsers, without any custom images etc.

    Is it result of this tutorial, or there is some other code/method?

    thank you.

  • Kululu

    Mar 24, 2012

    The link for download the code is broken … can you send me a link to download please?

(Get your Gravatar here.)

Leave a Comment