cirrus-ui/src/components/tooltips.scss

@use '../internal' as *;

$generate-utility: should-generate-classes($TOOLTIPS);

@if $generate-utility {
    /* 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 {
            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,
        &.tooltip--top-left:focus::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,
        &.tooltip--top-right:focus::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,
        &.tooltip--bottom:focus::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,
        &.tooltip--bottom-left:focus::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,
        &.tooltip--bottom-right:focus::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,
        &.tooltip--right:focus::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,
        &.tooltip--left:focus::after {
            transform: translate(-0.5rem, 50%);
        }
    }
}