So where do you start?  Well, you could just place a title attribute in certain links and call it a day.  But that would be so un-web 2.0, right?  Correct.  We could write some JavaScript.  And that would be fine, but you know what?  We can get away with something a little (in my opinion) better.  CSS3 and data attributes.  Data attributes are so HTML5 and hip and trendy.  So where do we start?

First off, why use the data attribute?  For me, it’s a way to eliminate an element.  For example, you could have a link wrapped around a span.  From there you could do some CSS to hide that span, position it relative to the anchor, and then use a :hover selector to show the span on a hover.  Not bad, I’d rather just have something like <a href="http://rollinglab.com" data-tooltip="Click Me To Go Home">Home</a>. So what that in mind, let’s get to a code block!

HTML

<a href="https://twitter.com/paul_ruescher" class="tooltip icon twitter" data-tooltip="Twitter"></a>
<a href="https://github.com/paulruescher" class="tooltip icon github" data-tooltip="GitHub"></a>

CSS

.tooltip {
     position: relative;
}
.tooltip:hover:before {
     content: ' ';
     position: absolute;
     top: 28px;
     left: 6px;
     width: 0;
     height: 0;
     border-left: 10px solid transparent;
     border-right: 10px solid transparent;
     border-bottom: 10px solid #45C6F0;
}
.tooltip:hover:after {
     content: attr(data-tooltip);
     padding: 0 10px;
     position: absolute;
     top: 35px;
     left: 0;
     background: #45C6F0;
     color: #FFF;
     text-align: center;
     text-indent: 0;
     text-transform: capitalize;
     line-height: 25px;
     font-weight: bold;
     white-space: nowrap;
     -webkit-border-radius: 2px;
     -moz-border-radius: 2px;
     border-radius: 2px;
}

Neat, right? The basics first. Our .icon class has position set to relative, so any children – our :before :after selectors – can be positioned relative to .icon. :before is our CSS triangle that points up and :after houses our tooltip. Everything within :after should be fairly straight-forward. The one key thing to note is content: attr(data-tooltip). It’s fairly self-explanatory: it takes the information within our previously set data-tooltip. Cool! I have this setup on our homepage for our social media icons in our biographies. Hover over the twitter icon in my bio and you should get a tooltip with the label ‘Twitter’.

It doesn’t take a lot of work, but I definitely like little details like this. Some icons – like GitHub – are not very obvious to everyone. But a quick hover, and you give your users a lot more information than they typically would receive.

input,
textarea {
     border: 1px solid #ccc;
     -moz-border-radius: 2px;
     border-radius: 2px;
     width: 100%;
}

But it’s not. You end up with a small overlap, exhibited in the image below.

You can see that the textarea is slightly wider than the input[type="text"] box. What causes this? In Chrome, there is 2px of padding on a <textarea> element, and 1px of padding on a <input> element. You could just set your own padding amount and then adjust the width. The problem with that is I don’t want to set the padding to a static amount (say 0.2em) and then have the width be a percentage.

Instead, set the box-sizing property to border-box:

input,
textarea {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     border: 1px solid #ccc;
     -moz-border-radius: 2px;
     border-radius: 2px;
     width: 100%;
}

Now, when the width is set to 100%, the padding is disregarded in the calculation of the width.

Boom! Easy. Support is good too – IE8 and up – as long as you use vendor prefixes. So next time you’re running into width issues on a responsive design, just throw in box-sizing.

// Twitter Feed
add_shortcode( 'twitter', 'rl_twitter_feed' );
function rl_twitter_feed( $atts ) {

	// Attributes
	if( isset( $atts['handle'] ) )
		$handle = $atts['handle'];

	// Check transients
	$body = get_transient( 'rl_twitter_data' );
	if( empty( $body ) ) {
		$twitter_url = 'http://twitter.com/statuses/user_timeline/' . $handle . '.json?count=3';
		$data = wp_remote_get( $twitter_url );
		$body = wp_remote_retrieve_body( $data );

		if( empty( $body ) )
			return false;

		$body = json_decode( $body, true );
		set_transient( 'rl_twitter_data', $body, 300 );
	}

	//Begin Output
	$output = '<aside class="twitter-feed"><ul>';

	// Work with decoded data
	foreach( $body as $tweet ) {
		$output .= '<li>';
		$output .= '<p><span class="twitter-meta"><time datetime="' . date( 'Y-m-d', strtotime( $tweet['created_at'] ) ) . '">' . date( 'd F, Y', strtotime( $tweet['created_at'] ) ) . '</time>';
		$output .= ' - <a href="http://twitter.com/' . $tweet['user']['screen_name'] . '">@' . $tweet['user']['screen_name'] . '</a></span>';
		$output .= $tweet['text'];
		$output .= '<span class="twitter-source">Via ' . $tweet['source'] . '</span>';
		$output .= '</p></li>';
	}
	$output .= '</ul></aside>';

	return $output;
}

The best thing about long mashups like this is I can just go to town on a problem. If I haven’t solved it by the time the song is over, then I suck and should just quit. This has yet to fail.

I’d be lying if I said that I haven’t listened to it a hundred times by now.

Time keeps on slippin’ slippin’ slippin’ into the future