Tooltip sass mixin

example.html

<div class='tooltip'>
  Hello world
</div>

<div class='t2'>
  Hello world
</div>

example.scss

.tooltip {
  width:200px;
  @include ttip(1rem, right);
}

.t2 {
  @include ttip(30px, left);
  position:absolute;
  right:10px;
  width: 100px;
}

tooltip.scss

@mixin ttip($size, $direction) {
  box-shadow: 1px 0px 3px #000;
  padding: $size;
  background-color: white;
  position: relative;


  &:before {
    // Shadow
    box-shadow: 1px 0px 3px #000;
    content: " ";
    width: $size;
    height: $size;
    background-color: white;
    display: block;
    position:absolute;
    bottom: -0.5 * $size;
    @if $direction == 'right' {
      left: $size;
    } @else {
      right: $size;
    }
    transform: rotateZ(45deg);
  }
  
  &:after {
     // Kill Shadow
    content: " ";
    width: 100%;
    height: $size * 0.71; // 1 / sqrt 2
    background-color: white;
    display: block;
    position:absolute;
    bottom:0;
    left: 0;
  }
  
}

http://codepen.io/anon/pen/obbPMG?editors=110