Random Thoughts on Web Design & Development

Oncemade

Here is how to create a very basic tooltip using only CSS. I've been using this technique all over my latest project.

Let's start by creating the following markup:

Markup
<a href="http://www.example.com" class="tooltip">
 My Link 
 <span>Cool tooltip<small></small></span>
</a>

CSS
.tooltip { position: relative; }
.tooltip span {
  position: absolute;
  right: 0;
  top: -35px;
  display: none;
  min-width: 50px;
  padding: 3px 8px;
  white-space: nowrap;
  font-size: 11px;
  text-align: center;
  background-color: rgba(0,0,0,.8);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
.tooltip span small {
  position: absolute;
  right: 10px;
  bottom: -6px;
  border-top: 6px solid rgba(0,0,0,.8);
  border-left: 6px solid transparent;
}
.tooltip:hover span { display: block; }

As I mentioned in a previous article, IE doesn't support RGBa. Adding the following styles, wrapped in a conditional comment, will make it work.

IE CSS
.tooltip span { background-color: #000; }
.tooltip span small { border-top: 6px solid #000; }

IE 6 Tooltip Arrow Fix
*html .tooltip span small { 
  border-left: 6px solid #363636; /* Match the color of the background */
}

For more info about creating speech bubble using only CSS, go to DeSandro's tutorial on creating speech bubble.

Demo

My Link Cool Tooltip
Long Tip Test Very Long Tooltip Test Very Long Tooltip Test

I got tired of my colleague, *cough Buz, asking me for links and tools that I find and use while working, so I've decided to create posts where I list these things for future reference. Enough talk lets get to it.

Bookmarklet is a very important piece of my development. Lately, I've been using the following:

  1. ReCSS

    Super B tool, used to reload your css without refreshing the whole page. It's very useful if you want to change a website in production that you can't run locally.

  2. Firebug Lite

    Firebug Lite

    If you develop websites in different browsers like I do (webkit nightly build), and can't live without Firebug; Firebug Lite is the way to go. It isn't as powerful as the Firebug add-on but it does a good job if you need to use the console or check for applied styles. Unfortunately, there is no way to change the css on the fly.

  3. Design

    Design Bookmarklet

    A very cool set of design tools. It includes grid, rule, unit and crosshair. A must have if you are designing in the browser.

  4. jQuerify

    As expected, it includes jQuery to the page. Very useful if you want to use firebug's console and jQuery selectors.

  5. Favelet Suite

    If you are a fan of the web developer toolbar add-on for Firefox, you will love this tool.

  6. xRay

    It displays CSS information of a selected object.

  7. Microformats

    Microformats

    Every time I markup a page, I try to use microformats as much as possible. This bookmarklet gives you a list of vCard on the page. Unfortunately, it doesn't display any other micro data.

If I missed any other bookmarklet, feel free to leave a comment with the link to it.

While at An Event Apart Boston, Jeremy Keith delivered the best lecture of the conference, about progressive enhancement. One slide caught my attention the most. It was about adding a class to the body if JavaScript was available. Here is his code example using jQuery:

Keith's Example using jQuery:
jQuery(function($) {
$('body').addClass('hasJS');
});


CSS
.hasJS .module {
display: none;
}
Why add a class if JavaScript is enabled?

Although the majority of desktop users have JavaScript enabled, mobile is one of the most used platforms to surf the web. Some mobile browsers don't support JavaScript. Keep in mind that search engines don't run JavaScript, so NEVER add important content using JavaScript.

read more »

Can everyone feel how square the IE world is about to become? We have recently began the effort of killing the rounded corner graphics and even sillier solutions such as Nifty Cube in favor of the progressive CSS rounded corner tags.

CSS
-webkit-border-radius
-moz-border-radius

It's a tough decision to start dramatically forking the experience between IE and “the rest of the world.” But, before you get overly excited, note the border-radius has it's gotchas!

read more »

When positioniseverything.net posted an article about clearfix technique, it didn't take much for web developers and designers to start adopting it. Lately, Dan Cederholm has been talking about renaming the class clearfix to group, which semantically speaking makes a lot more sense. So, let's go ahead and rename the class.

New Easy-Clearing
.group:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

Using conditional comments, let's add the proper code to handle IE 6 and IE 7 (IE8 supports the :after pseudo-elements; no extra code is necessary).

read more »
12345