tooltip.scss

TLDR

This file contains SCSS code for styling tooltips. It defines variables for tooltip arrow width and offsets, and includes a mixin for setting the z-index. It also includes styles for different tooltip positions (top, right, left, bottom) using the :hover pseudo-class.

@import '../styles/z-index';

// Tooltip arrow width
$tooltip-arrow-width: 6px;
// Space between element after transform
$tooltop-horizontal-offset: 2px;
$tooltop-vertical-offset: 2px;

%hover-tooltip-body {
    @include z-index(hover-tooltip-body);
    position: absolute;
    content: attr(data-tooltip);
    padding: 2px 4px;
    line-height: 1.2;
    font-size: 1em;
    text-align: center;
    color: rgb(255, 255, 255);
    background: rgb(0, 0, 0);
    // opacity: 0.8;
    border: 4px solid rgb(0, 0, 0);
    border-radius: 4px;
    text-shadow: rgba(0, 0, 0, 0.098) 1px 1px 1px;
    box-shadow: rgba(0, 0, 0, 0.1) 1px 1px 2px 0;
    min-width: 2em;
    max-width: 21em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

%hover-tooltip-arrow {
    @include z-index(hover-tooltip-arrow);
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-width: $tooltip-arrow-width;
    border-style: solid;
    border-color: #000 transparent transparent;
}

.octo-tooltip {
    display: inline;
    // Tooltip itself needs to be relative so
    // content and arrow can be absolute to it
    position: relative;
    // Arrow gets added before content
    &:hover::before {
        @extend %hover-tooltip-arrow; }
    // Tooltip message gets added after content
    &:hover::after {
        @extend %hover-tooltip-body; }

    // Top tooltip arrow style
    &.tooltip-top:hover::before {
        left: 50%;
        bottom: calc(100% - 2px);
        transform: translate(-50%, #{$tooltop-horizontal-offset});
    }
    // Top tooltip body style
    &.tooltip-top:hover::after {
        bottom: calc(100% + 10px);
        left: 50%;
        transform: translate(-50%, #{$tooltop-horizontal-offset});
    }

    // Right tooltip arrow style
    &.tooltip-right:hover::before {
        border-color: transparent #000 transparent transparent;
        top: 50%;
        right: calc(0em - 2px);
        transform: translate(#{$tooltop-vertical-offset}, -50%);
    }
    // Right tooltip body style
    &.tooltip-right:hover::after {
        top: 50%;
        left: calc(100% + 2px);
        transform: translate(#{$tooltop-vertical-offset}, -50%);
    }

    // Left tooltip arrow style
    &.tooltip-left:hover::before {
        top: 50%;
        left: calc(0em - 2px);
        border-color: transparent transparent transparent #000;
        transform: translate(-#{$tooltop-vertical-offset}, -50%);
    }
    // Left tooltip body style
    &.tooltip-left:hover::after {
        top: 50%;
        right: calc(100% + 2px);
        transform: translate(-#{$tooltop-vertical-offset}, -50%);
    }

    // Bottom tooltip arrow style
    &.tooltip-bottom:hover::before {
        left: 50%;
        top: calc(100% - 8px);
        border-color: transparent transparent #000;
        transform: translate(-50%, -#{$tooltop-horizontal-offset});
    }
    // Bottom tooltip body style
    &.tooltip-bottom:hover::after {
        left: 50%;
        top: calc(100% + 4px);
        transform: translate(-50%, -#{$tooltop-horizontal-offset});
    }
}