Pure CSS Tooltips

/* 
  About: CSS (SCSS) Tooltips
  Author: https://twitter.com/_uloga
*/

$success:   #2AA583 !default;
$info:      #15a3ff !default;
$warning:   #F3AB44 !default;
$danger:    #EE4D3B !default;

/* --- Arrow --- */

@mixin arrow($width, $direction, $color){
  
  border-style: solid;
  width: 0; height: 0;
  border-width: $width / 2 + 1;
  
  @if $direction == up{
      
      border-color: transparent transparent $color transparent;
      
  } @else if $direction == down{
      
      border-color: $color transparent transparent transparent;
      
  } @else if $direction == left{
      
      border-color: transparent $color transparent transparent;
      
  } @else if $direction == right{
      
      border-color: transparent transparent transparent $color ;
      
  }
}

/* --- Tooltip --- */

@mixin tooltip($position: top, $bg: #000, $color: #fff, $fixed: false, $width: 90px){
  
  position: relative;
  &:hover > .tooltip{
      display: inline-block;
  }
  & .tooltip:hover{
    display: none;
  }
  & .tooltip{
      
      //basic tooltip style
      background: $bg;
      display: none;
      width: $width;
      margin: 0;
      position: absolute;
      color: $color;
      font-family: Arial;
      font-size: 13px;
      text-align: center;
      text-decoration: none;
      line-height: 16px;
      padding: 4px 10px;
      white-space: nowrap;
      box-shadow: 0 1px 1px rgba(0,0,0,.16);
      -webkit-border-radius: 2px;
      -moz-border-radius: 2px;
      border-radius: 2px;
      z-index: 10000;
      
      //tooltip position
      @if $position == top{
          
          bottom: 100%;
          margin-bottom: 10px;
          @if $fixed == false{
              left: 50%;
              margin-left: - ($width + 20) / 2;
          }@else{
              left: 0;
          }
          
      } @else if $position == bottom{
          
          top: 100%;
          margin-top: 10px;
          @if $fixed == false{
              left: 50%;
              margin-left: - ($width + 20) / 2;
          }@else{
              right: 0;
          }
          
          
      } @else if $position == left{
          
          right: 100%;
          top: 50%;
          margin-right: 10px;
          margin-top: -12px;
          
      } @else if $position == right{
          
          left: 100%;
          top: 50%;
          margin-left: 10px;
          margin-top: -12px;
      }
      
      //tooltip arrow
      &:before{

          content: " ";
          position: absolute;

          @if $position == top{

              bottom: -11px;

              @if $fixed == left{
                  left: 10px;
              } @else if $fixed == right{
                  right: 10px;
              }@else{
                  left: 50%;
                  margin-left: -6px; 
              }

              @include arrow(10px, down, $bg);


          } @else if $position == bottom{

              top: -11px;

              @if $fixed == left{
                  left: 10px;
              } @else if $fixed == right{
                  right: 10px;
              }@else{
                  left: 50%;
                  margin-left: -6px; 
              }

              @include arrow(10px, up, $bg);


          } @else if $position == left{
              
              top: 50%;
              right: -11px;
              margin-top: -6px;
              @include arrow(10px, right, $bg);
              
          } @else if $position == right{

              top: 50%;
              left: -11px;
              margin-top: -6px;
              @include arrow(10px, left, $bg);

          }

      }
  }
  
}

/* usage - examples */

.top{
  @include tooltip(top, $success, #fff); 
}

.bottom{
  @include tooltip(bottom, $info, #fff);
}
.left{
  @include tooltip(left, $warning, #fff);
}
.right{
  @include tooltip(right, $danger, #fff);
}

.fixed-left{
  @include tooltip(top, #222, #fff, $fixed: left);
}
.fixed-right{
  @include tooltip(bottom, #222, #fff,$fixed: right);
}


/*
* HTML use cases
*/
<a href="#" class="top">
    Tooltip Top
    <span class="tooltip">Tooltip Top</span>
</a>

<a href="#" class="bottom">
    Tooltip Bottom
    <span class="tooltip">Tooltip Bottom</span>
</a>

<a href="#" class="left">
    Tooltip Left
    <span class="tooltip">Tooltip Left</span>
</a>

<a href="#" class="right">
    Tooltip Right
    <span class="tooltip">Tooltip Right</span>
</a>

<a href="#" class="fixed-left">
    Fixed Left
    <span class="tooltip">Fixed Left</span>
</a>

<a href="#" class="fixed-right">
    Fixed Right
    <span class="tooltip">Fixed Right</span>
</a>