Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="tooltip">What a lovely little tooltip!</div>

<p>Demo by Hugo Giraudel. <a href="http://www.sitepoint.com/sass-mixin-css-triangles/">See article</a>.</p>

SassMeister-input.scss

// ----
// Sass (v3.3.7)
// Compass (v1.0.0.alpha.18)
// ----

@function oppsite-position($direction) {
  @if $direction == top {
    @return bottom;
  }
  @if $direction == bottom {
    @return top;
  }
  @if $direction == right {
    @return left;
  }
  @if $direction == left {
    @return right;
  }
}

@mixin size($width, $height: $width) {
  width: $width;
  height: $height;
}

@mixin position($position, $args: ()) {
  $offsets: top right bottom left;
  position: $position;

  @each $offset in $offsets {
    $index: index($args, $offset);

    @if $index {
      @if $index == length($args) {
        #{$offset}: 0;
      }
      @else {
        $next: nth($args, $index + 1);
        @if is-vaild-length($next) {
          #{$offset}: $next;
        }
        @else if index($offsets, $next) {
          #{$offset}: 0;
        }
        @else {
          @warn "Invalid value `#{$next}` for offset `#{$offset}`.";
        }
      }
    }
  }
}

// Function checking if $value is a valid length
// ---
// @param [literal] $value: value to test
// ---
// @return [bool]

@function is-vaild-length($value) {
  @return (type-of($value) == "number" and not unitless($value))
          or (index(auto initial inherit 0, $value) != false);
}

// Shorthands
// ---

@mixin absolute($args: ()) {
  @include position(absolute, $args);
}

@mixin fixed($args: ()) {
  @include position(fixed, $args);
}

@mixin relative($args: ()) {
  @include position(relative, $args);
}

@mixin triangle($direction, $position, $color: currentColor, $size: 1em) {
  @if not index(top right bottom left, $direction) {
    @warn "Direction must be one of top, right, bottom, left.";
  }

  @else {
    @include absolute($position);
    @include size(0);
    content: '';
    z-index: 2;

    border-#{oppsite-position($direction)}: $size * 1.5 solid $color;
    $perpendicular-borders: $size solid transparent;

    @if $direction == top or $direction == bottom {
      border-left: $perpendicular-borders;
      border-right: $perpendicular-borders;
    }
    @else if $direction == right or $direction == left {
      border-bottom: $perpendicular-borders;
      border-top: $perpendicular-borders;
    }
  }
}


.tooltip { 
  // Centering
  max-width: 20em;
  margin: 0 auto;
  
  // Enable absolute positioning for pseudo-element
  position: relative;
  
  // Aesthetics
  background: #3498db;
  padding: .5em;
  border-radius: .15em;
  filter: drop-shadow(0 .15em .1em rgba(0,0,0,.25));
  
  // Font
  color: white;
  text-align: center;
  font-weight: bold;
  
  // Triangle
  &:before {
    @include triangle(
      $direction : top, 
      $position  : bottom 100% left 1em, 
      $color     : #3498db,
      $size: 1em
    );
  }
}

body {
  padding: 1em;
}

p {
  text-align: center;
  padding-top: 3em;
}

SassMeister-output.css

.tooltip {
  max-width: 20em;
  margin: 0 auto;
  position: relative;
  background: #3498db;
  padding: .5em;
  border-radius: .15em;
  filter: drop-shadow(0 0.15em 0.1em rgba(0, 0, 0, 0.25));
  color: white;
  text-align: center;
  font-weight: bold;
}
.tooltip:before {
  position: absolute;
  bottom: 100%;
  left: 1em;
  width: 0;
  height: 0;
  content: '';
  z-index: 2;
  border-bottom: 1.5em solid #3498db;
  border-left: 1em solid transparent;
  border-right: 1em solid transparent;
}

body {
  padding: 1em;
}

p {
  text-align: center;
  padding-top: 3em;
}

SassMeister-rendered.html

<div class="tooltip">What a lovely little tooltip!</div>

<p>Demo by Hugo Giraudel. <a href="http://www.sitepoint.com/sass-mixin-css-triangles/">See article</a>.</p>