BuddyPress

Since a few members here asked me how I got the cool hover effect on members avatars (display their name when you mouse over the avatar) on Cureuphoria (http//cureuphoria.com), I thought I’d write a tutorial to share the trick I used.

I posted it on my blog (http://stylozero.com/blog).

Here’s the direct link to the article:

http://stylozero.com/a-cool-hover-effect-for-your-buddypress-members-avatars/

I hope it’ll be useful for your BuddyPress site.
Let me know.

Merci beaucoup, tres interessant et utille !

De rien, el_terko!

Wow. Tipsy is great – this would be perfect for doing Group Forum topic previews.

The one constructive suggestion I can give you is to further tweak the CSS so the “Tipsy” popup name is in focus – now it kind of conflicts (visually) with the avatar above it. How easy is it to tweak the CSS – for example, is it possible to put an opaque overlay on the parent div so the focus is on the tipsy popup?

@3sixty By default, the tipsy popup was a little transparent, which was “conflicting” even more with the above photo. I did turn it flat black (or close to it), which it renders better the member’s name.

Otherwise, I don’t think it really needs an opaque layer around the popup bubble, to focus even more on the name. If that is what you meant. But it’s cool that you suggest improvements, and I’m all for it.

If you get something better out of it, let me know.

I reckon the best currently-out-there fancy tooltip library in terms of flexibility and completeness is jquery qtips (http://craigsworks.com/projects/qtip/), but that’s just me!

Super cute. Love this idea

Nice little effect but you really should be using wp_enqueue_script. You wouldn’t need to worry bout any jQuery dependency then…

@stwc Thanks for sharing that resource, it looks cool! I’ll have a deeper look at it.

You know, my tutorial is not about using tipsy, just about the idea of using a tooltip to improve usability (the default browser tooltip for the title attribute is just too slow and small), so all other ways to accomplish that are always welcome.

Yeah, you can basically use any jQuery tooltip plugin out there (there are a ton!).

But thanks to gian-ava for getting the ball rolling for everyone!

@r-a-y

@Travel-Junkie Could you expand more about that? You got me lost on the wp_enqueue_script. Thanks.

wp_enqueue_script is a wordpress function that lets you add javascript files to your site. Just put it in your themes functions.php file or a plugin file. The great thing about it is that it looks if that file has been included already. If it hasn’t only then does it load it. You can also specify dependencies, i.e. jQuery. This means that it will always load the dependencies first. You can also specify if you want to load the script in the header or the footer. Here’s the function:

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

More info here: http://codex.wordpress.org/Function_Reference/wp_enqueue_script

@Travel-Junkie I do actually include, as a habit, the jQuery library that way. Only I got a function for that. Thanks for pointing that out, anyway. I thought you were talking about something else.

Otherwise, because I did implement the effect on another site for someone, and run into conflicts with other js libraries, I decided to re-write the tutorial, with some adjustments.

Same page: http://stylozero.com/a-cool-hover-effect-for-your-buddypress-members-avatars/

Gee, I was looking for this post, had it as a favourite but when bp.org was redesigned, it misteriously “vanished” (together with all my other favourites)…

@gian-ava nice writeup.
However, I would do it without editing template files if possible.
So rather than editing header.php, I’d upload the jquery.tipsy.js file to my themes js folder.
Create a new file called jquery.tipsy.tips.js and upload to the same folder, use this file to add the jquery rules that you want the tips displayed on, like

var $j = jQuery.noConflict();
$j(document).ready(function() {
$j('.item-avatar a').tipsy({gravity: 's'});
});

Then in my themes functions.php add

/* Load the Tipsy JS javascript */
function tipsy_loaded_init() {
wp_enqueue_script( 'tipsy-js', TEMPLATEPATH . '/js/jquery.tipsy.js', array( 'jquery' ) );
wp_enqueue_script( 'tipsy-js-tips', TEMPLATEPATH . '/js/jquery.tipsy.tips.js', array( 'jquery' ) );
}
add_action( 'template_redirect', 'tipsy_loaded_init' );


As for editing the BuddyPress widgets, maybe you should open a trac ticket to have title=" added to the image hrefs in bb-core-widgets.php