A cool hover effect for your BuddyPress members 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.
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:
Now it's time to setup the jQuery stuff.
Open the header.php file and find this:
<?php wp_head(); ?>
Replace it with:
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;
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:
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.