Tooltip mixin to create a bordered and shaded tooltip.

tooltip.scss

///////////////////////////////////////////////////
//    SASS & Compass tooltip mixin
///////////////////////////////////////////////////

@mixin tooltip(
  $dir: top,
  $pos: 50%,
  $color1: #fff,
  $color2: darken($color1, 30%),
  $size1: 6px,
  $size2: $size1
) {
  @include tip($dir, $pos, $color1, $color2, $size1, $size2);
  margin-top: $size1;
  background: $color1;
  position: absolute;
  @include border-radius($size1);
  @include box-shadow(3px 1px 10px rgba(#000, .2));
  border: 1px solid $color2;
  z-index: 9;
}

@mixin tip(
  $dir: top,
  $pos: 50%,
  $color1: #fff,
  $color2: darken($color1, 30%),
  $size1: 6px,
  $size2: $size1
) {
  $opos: opposite-position($dir);
  $transparent: if($dir == left or $dir == right, (top, bottom), (left, right));
  &:before,
  &:after {
    #{nth($transparent, 1)}: $pos;

    height: 0;
    width: 0;
    display: block;
    content: " ";
    position: absolute;
  }
  &:before {
    border-#{nth($transparent, 1)}: #{$size2 + 1} solid transparent;
    border-#{nth($transparent, 2)}: #{$size2 + 1} solid transparent;
    border-#{$opos}: #{$size1 + 1} solid $color2;
    margin-#{nth($transparent, 1)}: -1 - $size2;
    #{$dir}: -1 - $size1;
  }
  &:after {
    border-#{nth($transparent, 1)}: $size2 solid transparent;
    border-#{nth($transparent, 2)}: $size2 solid transparent;
    border-#{$opos}: $size1 solid $color1;
    margin-#{nth($transparent, 1)}: - $size2;
    #{$dir}: - $size1;
  }
}

Sans-compass version:

@mixin tooltip(
  $dir: top,
  $pos: 50%,
  $color1: #fff,
  $color2: darken($color1, 30%),
  $size1: 6px,
  $size2: $size1
) {
  @include tip($dir, $pos, $color1, $color2, $size1, $size2);
  margin-top: $size1;
  background: $color1;
  position: absolute;
  border-radius: $size1;
  box-shadow: 3px 1px 10px rgba(#000, .2);
  border: 1px solid $color2;
  z-index: 9;
}

@mixin tip(
  $dir: top,
  $pos: 50%,
  $color1: #fff,
  $color2: darken($color1, 30%),
  $size1: 6px,
  $size2: $size1
) {
  $opos: map-get(( top: bottom, right: left, bottom: top, left: right ), $dir);
  $transparent: if($dir == left or $dir == right, (top, bottom), (left, right));
  &:before,
  &:after {
    #{nth($transparent, 1)}: $pos;

    height: 0;
    width: 0;
    display: block;
    content: " ";
    position: absolute;
  }
  &:before {
    border-#{nth($transparent, 1)}: #{$size2 + 1} solid transparent;
    border-#{nth($transparent, 2)}: #{$size2 + 1} solid transparent;
    border-#{$opos}: #{$size1 + 1} solid $color2;
    margin-#{nth($transparent, 1)}: -1 - $size2;
    #{$dir}: -1 - $size1;
  }
  &:after {
    border-#{nth($transparent, 1)}: $size2 solid transparent;
    border-#{nth($transparent, 2)}: $size2 solid transparent;
    border-#{$opos}: $size1 solid $color1;
    margin-#{nth($transparent, 1)}: - $size2;
    #{$dir}: - $size1;
  }
}