cirrus-ui/src/components/tooltips.scss

A lightweight UI framework written in SCSS

@use '../src/internal' as *;

@if should-generate-classes($TOOLTIPS) {
    /* TOOLTIPS */
    .tooltip {
        position: relative; /* let's the pseudoelement that we are displaying relative to the button. */
        overflow: visible; /* Allows the pseudoelement to be shown */
        white-space: nowrap; /* Keeps the button text from wrapping and getting too large */

        /* This is the psuedoelement that creates the tooltip */
        &::after {
            position: absolute;
            color: #fff;
            font-size: 0.6rem;
            background-color: $tooltip-primary-bg;
            content: attr(
                data-tooltip
            ); /* Retrieves the data specified in this element property and displays it as text */
            display: block;
            line-height: 1rem;
            text-transform: none;
            overflow: hidden;
            padding: 0.4rem 0.8rem;
            opacity: 0; /* Hide the element */
            text-overflow: ellipsis;
            max-width: 15rem;
            transform: translate(-50%, 0);
            transition: all var(--animation-duration) ease;
            z-index: 200;
            pointer-events: none;
            bottom: 100%; /* Pushes the tooltip above the button */
            left: 50%; /* Horizontally center it */
            border-radius: 0.2rem;
        }

        /* Handles the on hover event of the button and then modifies the associated tooltip accordingly. */
        &:focus::after,
        &:hover::after,
        &.tooltip--visible::after {
            opacity: 1;
            transform: translate(-50%, -0.5rem);
            transition: all var(--animation-duration) ease;
        }

        /* Tooltip top left */
        &.tooltip--top-left::after {
            transform: translate(-50%, 0);
        }

        &.tooltip--top-left {
            &:hover::after,
            &:focus::after,
            &.tooltip--visible::after {
                left: 0;
                transform: translate(-100%, -0.5rem);
            }
        }

        /* Tooltip top right */
        &.tooltip--top-right::after {
            left: auto;
            transform: translate(15%, 0);
        }

        &.tooltip--top-right {
            &:hover::after,
            &:focus::after,
            &.tooltip--visible::after {
                right: 0;
                transform: translate(100%, -0.5rem);
            }
        }

        /* Tooltip bottom */
        &.tooltip--bottom::after {
            top: 100%;
            transform: translate(-50%, -1rem); /* Moves tooltip to the center horizontally and shifts tooltip down */
            bottom: auto;
        }

        &.tooltip--bottom {
            &:hover::after,
            &:focus::after,
            &.tooltip--visible::after {
                transform: translate(-50%, 0.5rem);
                bottom: auto;
            }
        }

        /* Tooltip bottom left */
        &.tooltip--bottom-left::after {
            top: 100%;
            transform: translate(-65%, -1rem);
            bottom: auto;
        }

        &.tooltip--bottom-left {
            &:hover::after,
            &:focus::after,
            &.tooltip--visible::after {
                left: 0;
                transform: translate(-100%, 0.5rem);
            }
        }

        /* Tooltip bottom right */
        &.tooltip--bottom-right::after {
            left: auto;
            top: 100%;
            transform: translate(0%, -1rem);
            bottom: auto;
        }

        &.tooltip--bottom-right {
            &:hover::after,
            &:focus::after,
            &.tooltip--visible::after {
                right: 0;
                transform: translate(100%, 0.5rem);
            }
        }

        /* Tooltip right */
        &.tooltip--right::after {
            left: 100%;
            bottom: 50%;
            transform: translate(-1rem, 50%);
        }

        &.tooltip--right {
            &:hover::after,
            &:focus::after,
            &.tooltip--visible::after {
                transform: translate(0.5rem, 50%);
            }
        }

        /* Tooltip Left */
        &.tooltip--left::after {
            right: 100%;
            bottom: 50%;
            left: auto; /* Needed to work */
            transform: translate(1rem, 50%);
        }

        &.tooltip--left {
            &:hover::after,
            &:focus::after,
            &.tooltip--visible::after {
                transform: translate(-0.5rem, 50%);
            }
        }
    }
}