Merci beaucoup, tres interessant et utille !
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: https://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
@thekmen “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”.
I actually thought about that, because when I had to implement the effect on a site that used the who’s online widget, I had to add the title attribute into the “bb-core-widgets.php”, which is a core file, and that means that updates wil kill it.
Anyway, on this matter, can I ask you if it’s possible to write a function to add the title attribute to “.item-avatar a”?
I thought to give it a try with jQuery, since I am not a PHP Ninja yet?
What’s your thoughts?
@thekmen For my site, since I have a “js” folder, I did put the tipsy plugin in there and than put the custom tipsy code in my “scripts.js” file. Also I call all the JS scripts from the footer.php, not the header. So I just had to add the call for the tipsy plugin (the code for scripts.js was already there) into the footer.php template file.
The tutorial is more to give you the basic idea, than I think everyone customize it a little depending of their file structure and knowledge.
But I must say that your suggestion is very good, and I would have never thought of something like that. Thanks a lot for suggesting such a good option. Maybe you could also go and write up the option in the comments for the post itself, to enrich the article.
@gian-ava
adding the attribute could be done by jQuery but would be so much easier doing it in core, so should really be a trac request.
as for adding the scripts to the footer, I’m sure you can add ‘true’ to the end of the end of wp_enqueue_script like
wp_enqueue_script( 'tipsy-js', TEMPLATEPATH . '/js/jquery.tipsy.js', array( 'jquery' ), true );
@el_terko 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)…
They’re still there, but it’s incredibly annoying not to be able to add new ones. Here: https://buddypress.org/forums/profile/el_terko/favorites
