tooltip.scss

/* Tooltips for Stud.IP with CSS3 only -------------------------------------- */
%tooltip {
    @include arrow-bottom-border(9px, $dark-gray-color-5, 1px, $dark-gray-color-30, 5px);

    background-color: var(--dark-gray-color-5);
    border: 1px solid var(--dark-gray-color-30);
    box-shadow: 0 1px 0 fade-out($white, 0.5) inset;
    font-size: var(--font-size-base);
    margin-bottom: 8px;
    max-width: $grid-element-width;
    padding: 10px;
    position: absolute;
    text-align: left;
    text-shadow: 0 1px 0 fade-out($white, 0.5);
    white-space: normal;
    z-index: 10000;

    word-wrap: break-word;
    hyphens: auto;
}

.studip-tooltip {
    @extend %tooltip;
}

.tooltip {
    display: inline-block;
    position: relative;

    &.tooltip-icon {
        @include icon(before, info-circle, inactive);
    }
    &.tooltip-important {
        @include icon(before, info-circle, attention);
    }

    .tooltip-content {
        @extend %tooltip;
        display: none;
    }

    &:hover .tooltip-content, &:focus .tooltip-content {
        bottom: 100%;
        display: inline-block;
        left: 50%;
        margin-left: -($grid-element-width) / 2 - 10px;
        width: $grid-element-width;
    }
}