.fs-tooltip-trigger
{
    &:not(a)
    {
        cursor: help;
    }

    position: relative;

    .fs-tooltip
    {
        opacity:       0;
        visibility:    hidden;
        @include transition(opacity 0.3s ease-in-out);
        position:      absolute;
        background:    $tooltip-bkg-color;
        color:         $tooltip-color;
        font-family:   'arial', serif;
        font-size:     12px;
        padding:       10px;
        z-index:       999999;
        bottom:        100%;
        margin-bottom: 5px;
        left:          0;
        right:         0;
        @include border-radius(5px);
        @include box-shadow(1px 1px 1px rgba(0, 0, 0, 0.2));
        line-height:   1.3em;
        font-weight:   bold;
        text-align:    left;

        .rtl &
        {
            text-align: right;
        }

        &::after
        {
            content:      ' ';
            display:      block;
            width:        0;
            height:       0;
            border-style: solid;
            border-width: 5px 5px 0 5px;
            border-color: $tooltip-bkg-color transparent transparent transparent;
            position:     absolute;
            top:          100%;
            left:         21px;

            .rtl &
            {
                right: 21px;
                left:  auto;
            }
        }
    }

    &:hover
    {
        .fs-tooltip
        {
            visibility: visible;
            opacity:    1;
        }
    }
}