Skip to:
Content
Pages
Categories
Search
Top
Bottom

Tutorial: cool way to display the members name when you mouse over avatars

Viewing 18 replies - 1 through 18 (of 18 total)
  • Avatar of josemv
    josemv
    Participant

    @el_terko

    Merci beaucoup, tres interessant et utille !

    Avatar of gian-ava
    gian-ava
    Participant

    @gian-ava

    De rien, el_terko!

    Avatar of 3sixty
    3sixty
    Participant

    @3sixty

    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?

    Avatar of gian-ava
    gian-ava
    Participant

    @gian-ava

    @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.

    Avatar of stwc
    stwc
    Participant

    @stwc

    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! ;-)

    Avatar of Sarah Gooding
    Sarah Gooding
    Participant

    @pollyplummer

    Super cute. Love this idea :)

    Avatar of Travel-Junkie
    Boris
    Participant

    @travel-junkie

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

    Avatar of gian-ava
    gian-ava
    Participant

    @gian-ava

    @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.

    Avatar of r-a-y
    r-a-y
    Moderator

    @r-a-y

    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!

    Avatar of gian-ava
    gian-ava
    Participant

    @gian-ava

    @r-a-y ;-)

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

    Avatar of Travel-Junkie
    Boris
    Participant

    @travel-junkie

    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

    Avatar of gian-ava
    gian-ava
    Participant

    @gian-ava

    @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/

    Avatar of josemv
    josemv
    Participant

    @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)…

    Avatar of thekmen
    thekmen
    Participant

    @thekmen

    @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

    Avatar of gian-ava
    gian-ava
    Participant

    @gian-ava

    @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?

    Avatar of gian-ava
    gian-ava
    Participant

    @gian-ava

    @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.

    Avatar of thekmen
    thekmen
    Participant

    @thekmen

    @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 );

    Avatar of stwc
    stwc
    Participant

    @stwc

    @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: http://buddypress.org/forums/profile/el_terko/favorites

Viewing 18 replies - 1 through 18 (of 18 total)

You must be logged in to reply to this topic.