Tooltip mixins

tooltip-mixins.scss

/*****************************************************************************

    Tooltip Mixins

    This features a series of mixins used together to customize tooltip
    designs.
    
    The mixins rely on a few assumptions:
    -- The light source for the drop shadow is the same for all tooltips.
    -- The pointer is square with no border-radius.
    -- The portion of the pointer that sticks out beyond the tooltip's edge 
       is the same for all tooltips.
       
    Make your own adjustments if you can't use those guidelines.
    
    Sample usage:

    $shadow: .2rem .2rem .2rem rgba(0, 0, 0, .2);

    .tooltip--info {
        @include pointer-base-styles;
        @include pointer-framing(16px, left, middle, 1px, solid #ccc);
        @include tooltip-backgrounds(white);
        @include tooltip-framing(15px, 4px, $shadow);
        @include tooltip-position(false, false, 0, false);
        @include tooltip-text(black, 15px, 1.25);
        width: 300px;
    }
    
*****************************************************************************/

// POSITION THE TOOLTIP
@mixin tooltip-position($top: false, $right: false, $bottom: false, $left: false) {
    position: absolute;
    
    @if $top != false {
        top: $top;
    }
    
    @if $right != false {
        right: $right;
    }
    
    @if $bottom != false {
        bottom: $bottom;
    }
    
    @if $left != false {
        left: $left;
    }
    
    @if $left == $right {
        margin-left: auto;
        margin-right: auto;
    }
}

@mixin tooltip-backgrounds($bg) {
    &, &::after {
        background: $bg;
    }
}

@mixin tooltip-text($color: false, $font-size: false, $line-height: false) {
    color: $color;
    font-size: $font-size;
    line-height: $line-height;
}

@mixin tooltip-framing($padding: false, $border-radius: false, $shadow: false) {
    @if $padding != false {
        padding: $padding;
    }
    
    @if $border-radius != false {
        border-radius: $border-radius;
    }

    @if $shadow != false {
        &, &::before {
            box-shadow: $shadow;   
        }
    }    
}

@mixin pointer-base-styles {
    &::after, &::before {
        content: "";
        position: absolute;
        transform: rotate(45deg);
    }
}

@mixin pointer-position($size, $side, $cross-position, $border-width) {
    $half-size: $size / 2;
    
    height: $size;
    width: $size;

    // MOVE PSEUDO-ELEMENTS OUTSIDE OF TOOLTIP BODY
    @if $border-width != 0 {
        #{$side}: calc(#{-$half-size} - #{$border-width});
    } @else {
        #{$side}: -$half-size;
    }

    // MOVE PSEUDO-ELEMENTS ALONG TOOLTIP SIDE
    @if $side == "left" or $side == "right" {
        @if $cross-position == "middle" {
            top: calc(50% - (#{$half-size} + #{$border-width}));
        } @else {
            top: $cross-position;
        }
    } @elseif $side == "bottom" or $side == "top" {
        @if $cross-position == "middle" {
            left: 0;
            margin: auto;
            right: 0;
        } @else {
            left: $cross-position;
        }
    }
}

@mixin pointer-framing($size, $side, $cross-position, $border-width: 0, $border-style: false) {
    &::before {
        z-index: -1;
    }
    
    &::after, &::before {
        @include pointer-position($size, $side, $cross-position, $border-width);
    }

    @if $border-width != 0 {
        border: $border-width $border-style;
        
        &::after, &::before {
            border: $border-width solid transparent;          
        }
        
        &::after {
            border-bottom: $border-width $border-style;
            border-left: $border-width $border-style;
            
            @if $side == "right" {
                transform: rotate(225deg);
            } @elseif $side == "bottom" {
                transform: rotate(-45deg);
            } @elseif $side == "top" {
                transform: rotate(135deg);
            }
        }
    }
}