tooltip.scss

/**
 * Tooltip.js is a lightweight javascript plugin for responsive and
 * easy to use tooltips.
 *
 * @version   1.0
 * @author    Jakob Ploens <jakob@2helden.com>
 * @copyright Jakob Ploens 2016
 * @license   The MIT License
 */

/**
 * Settings
 *
 */
$tooltip-background-color:    #000;
$tooltip-font-color:          #fff;

$tooltip-z-index:             10000;
$tooltip-max-width:           30em;
$tooltip-padding:             .5em 1em;
$tooltip-border-radius:       2px;
$tooltip-transform-offset:    .5em;

$tooltip-caret-size:          .5em;
$tooltip-caret-offset:        2.5;

$tooltip-transition-duration: 200ms;


/**
 * Don't change following lines till line 42.
 * These are the most important ones.
 *
 */
.tooltip {
    opacity:   0;
    position:  absolute;
    z-index:   $tooltip-z-index;
    transform: translate(0, #{$tooltip-transform-offset * -1});
}
.tooltip--fixed {
    position: fixed;
}
.tooltip--is-shown {
    opacity:  1;
    transform: translate(0, 0);
}

/**
 * Here you go – our theme. Adjust like you want it to look like.
 */
.tooltip {
    background:    $tooltip-background-color;
    color:         $tooltip-font-color;
    text-align:    center;

    max-width:     $tooltip-max-width;
    padding:       $tooltip-padding;
    border-radius: $tooltip-border-radius;

    transition: opacity $tooltip-transition-duration ease-in-out,
                transform $tooltip-transition-duration ease-in-out;
}

/**
 * Defining the caret.
 */
.tooltip::after {
    content:       '';
    position:      absolute;
    left:          50%;
    width:         0;
    height:        0;

    border-left:   $tooltip-caret-size solid transparent;
    border-right:  $tooltip-caret-size solid transparent;
    border-top:    $tooltip-caret-size solid $tooltip-background-color;

    margin-left:   -1 * $tooltip-caret-size;
    bottom:        -1 * $tooltip-caret-size;
}
.tooltip--bottom {
    transform: translate(0, #{$tooltip-transform-offset});
}
.tooltip--bottom::after {
    border-top:    none;
    border-bottom: $tooltip-caret-size solid $tooltip-background-color;
    top:           -1 * $tooltip-caret-size;
    bottom:        auto;
}
.tooltip--left {
    margin-left: $tooltip-caret-size * $tooltip-caret-offset * -1;
}
.tooltip--left::after {
    left:          $tooltip-caret-size * $tooltip-caret-offset;
    margin:        0;
}
.tooltip--right::after {
    right:         $tooltip-caret-size * $tooltip-caret-offset;
    margin:        0;
    left:          auto;
}