<div  class="wrapper">
    
    <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>
  
</div>
/* 
    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);
}

/* --- LAYOUT: HAS NOTHING TO DO WITH TOOLTIPS --*/

.wrapper{
    width: 800px;
    margin: 125px auto;
    & a{
        float: left;
        margin-right: 15px;
        text-decoration: none;
        color: #333;
        font-size: 15px;
        padding: 6px 12px;
        background: #ccc;
        font-family: Arial;
    }
    & p{
        float: left;
        width: 100%;
        margin-top: 50px;
        color: #555;
        
        & span{
            float: left;
            margin-right: 6px;
        }
        
        & .made-with{
            background: transparent;
            padding: 0;
            color: orangered;
            text-decoration: underline;
        }
    }
    
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.