Published on by Paul Ruescher

Tooltips using :before and :after

Confession: I love adding too many features to a website.  I always have to consciously remind myself that less is more.  Feature creep?  More like feature beast mode.  So when we launched the Rolling Lab site, I immediately wanted to add something.  Linen backgrounds?  Yes.  CSS3 Animations.  I want.  Canvas?  Moar (sic).  I decided against all of those ill-advised ideas, and settled on something that we can all agree on.  Hover tooltips.   The little things make the biggest difference, right?

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.

Published on by Paul Ruescher

Form Fields and Width: 100%

One thing I ran into when I first started doing responsive design was the misalignment of input and textarea boxes. For example, you’d think the following code would be self-explanatory.

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.

Published on by Paul Ruescher

Australian Open Finals

You can guarantee that the Rolling Lab team is watching the Australian Open Finals right now. You should be too. This is great theatre.

Published on by Paul Ruescher

View As Analog

One of the most productive things I’ve ever done is to set the clock on my computer to analog. Top-right corner of OS X, click on the time, and then click ‘View As Analog’. If you happen to look up, you get a general sense of the time, but not the specific time. This has helped so much. Instead of realizing it’s 2 AM and then thinking it’s bed-time, I look up and get a general idea of the time and continue working.

Published on by Paul Ruescher

Twitter Shortcode

Here’s a shortcode I made recently for a WordPress site. It stores the retrieved data as a transient, minimizing HTTP requests and subsequently reducing page load times for users. Feel free to use it. Post any comments if you want clarification.

// 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;
}

Published on by Paul Ruescher

Show Me My Opponent

I’ve been listening to D.Veloped’s Work: Party mixtape… and this. DIFF is 1:18:56 of non-stop fun. My favourite section is around 54:22, “Big Stuntin’”. It’s awesome.

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.

Published on by Paul Ruescher

If You Only Knew The Power Of the Dark-Side

This song is amazing. Tim sent me the link to it when I was in Vancouver last-week. It’s a dubstep remix of ‘Binary Sun’ – the Jedi theme from the Star Wars movies. There are three voice samples that are absolutely amazing. The last one, right after the bridge is Vader.

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

Published on by Paul Ruescher

Work: Party

Here’s what I’m listening to while building the new site. It took me a couple listens, but now I’m really digging it. The lead in from The Childish Games to Fly Like An Eagle is amazing.

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

123