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:

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.

The challenge here is to keep the HTML markup as clean as possible and just use CSS to style the text.

So, instead of assigning an id or a class to each paragraph, like so…

<p id="1">I am not a communication consultant.</p>
<p id="2">I am not a project manager.</p>
<p id="3">I am not an information architect.</p>
…

…we can keep the markup clean and neat…

<div id="teaser">

  <p>I am not a <em>communication consultant</em>.</p>
  <p>I am not a <em>project manager</em>.</p>
  <p>I am not an <em>information architect</em>.</p>
  <p>I am not an <em>art director</em>.</p>
  <p>I am not a <em>graphic designer</em>.</p>
  <p>I am not a <em>web designer</em>.</p>
  <p>I am <em>all</em> that. <a href="/services" title="services">Pick what you need.</a></p>

</div><!-- end "teaser" -->

… and make use of the + sign combinator to target each paragraph, and play with its position and size…

#teaser p { color: #666; margin-left: 40px; }
#teaser p+p { margin-left: 160px; font-size: 5em; }
#teaser p+p+p { margin-left: 105px; font-size: 3.4em; }
#teaser p+p+p+p { margin-left: 0; font-size: 3.4em; }
#teaser p+p+p+p+p { margin-left: 140px; font-size: 4em; }
#teaser p+p+p+p+p+p { margin-left: 90px; font-size: 4.5em; }
#teaser p+p+p+p+p+p+p { margin-left: 300px; font-size: 3.4em; margin-top: 30px; }

#teaser p em { color: #444; }

There you have it! A simple but clever solution to have a graphical text effect with CSS without adding any extra id's or classes to the HTML.

A few weeks ago I worked on this website. The agency who hired me provided me with Photoshop mockups, and I was in charge of developing the front-end code (HTML, CSS, JS) for all the different pages.

For the homepage there was an intro block that I needed to turn into markup and style afterword with CSS.

Here's a screenshot of that block…

While analyzing the visual mockup, the first (evil) temptation to write the HTML markup was this:

<div id="intro">	

   <h2>As a global leader in corrugated packaging, International Paper is supplying 
    a wide range of market segments in virtually all geographies.</h2>

   <a href="#" alt="contact us">Need more information? Contact us.</a>

   <p>With over 30 years of experience in the segment, International Paper is the reliable partner 
    for all fresh fruit & vegetable packaging needs. We offer our customers value-added 
    packaging solutions including supply chain and design services.</p>

</div><!-- end "intro" -->

Which translates things pretty much in the order suggested by the visual presentation.

BUT! For the sake of having a markup that respects the law of semantics and the logical flow of content whenever separated from its presentation, the ideal order should be as follow:

Title (heading):
As a global leader in corrugated packaging, International Paper is supplying a wide range of market segments in virtually all geographies.

Text (paragraphs):
With over 30 years of experience in the segment, International Paper is the reliable partner for all fresh fruit & vegetable packaging needs. We offer our customers value-added packaging solutions including supply chain and design services.

Call to action (link):
Need more information? Contact us.

Which assigns a different order of elements…

Actually, that would make more sense if you read the content stripped out of the presentational layer (CSS). And it's never said enough that semantics should be considered above all, when coding. You may, for instance, read the content with an RSS reader, with the result of having the title first, then the link to the action and then the text, which wouldn't look right.

So, the right way of coding the markup would be this:

<div id="intro">

   <h2>As a global leader in corrugated packaging, International Paper is supplying 
    a wide range of market segments in virtually all geographies.</h2>

   <p>With over 30 years of experience in the segment, International Paper is the reliable partner 
    for all fresh fruit & vegetable packaging needs. We offer our customers value-added 
    packaging solutions including supply chain and design services.</p>

   <a href="#" alt="contact us">Need more information? Contact us.</a>

</div><!-- end "intro" -->

Now, to make it look like the mockup, the obvious solution to apply would be to use two basic CSS techniques: image replacement, to turn the call to action link into an image, and absolute positioning, to display the image at the right side of the title, and before the text.

#intro { position: relative; }
#intro h2 { width: 455px; }

#intro a { 
    position: absolute; 
    top: 0px; 
    right: 0px; 
    display: block; 
    width: 172px; 
    height: 70px; 
    text-indent: -9999px;
    background: url(images/intro-contact.jpg) no-repeat;
}

We now have the same presentation as on the mockup, but we kept the HTML markup logical!

I am sure that there are exceptions when we just can't apply simple layout techniques such as this one, without having to compromise semantics.

But the purpose of this article wasn't to write a CSS positioning tutorial.
It was to bring the attention to the fact that writing proper markup is essential, and in order to do so you need to look at visual mockups for a little time, and interpret them the right way, instead of going to rush up and start to code.

Very basic practice for some, but unfortunately in my professional life I am constantly meeting coders that just don't care about such an approach.
And the thing is… they just should, and there are millions of reasons why.

Remember, logical HTML markup comes first!