yefee-ui/src/lib/Tooltip/tooltip.css

beautifully made react components

@import url('../root.css');

/* Base */

.yefee-tooltip-base {
    display: inline-block;
    position: relative;
}

.yefee-tooltip {
    text-align: center;
    font-size: 16px;
    padding-block: 4px;
    padding-inline: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 9999999999999999px;
    white-space: nowrap;
}

/* Colors */

.dark-tooltip {
    background-color: var(--dark);
    color: var(--white);
}

.white-tooltip {
    background-color: var(--white);
    color: var(--dark);
}

/* Positions */

.tooltip-left {
    transform: translate(-4px, -50%);
    position: absolute;
    right: 100%;
    top: 50%;
}

.tooltip-right {
    transform: translate(4px, -50%);
    position: absolute;
    left: 100%;
    top: 50%;
}

.tooltip-bottom {
    transform: translate(-50%, 4px);
    position: absolute;
    left: 50%;
    top: 100%;
}

.tooltip-top {
    transform: translate(-50%, -4px);
    position: absolute;
    left: 50%;
    bottom: 100%;
}

/* Animations Classes */

.yefee-tooltip-invisible {
    opacity: 0;
    animation: invisible 300ms;
}

.yefee-tooltip-visible {
    opacity: 1;
    animation: visible 300ms;
}

.yefee-tooltip-first{
    opacity: 0;
}

@keyframes visible {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes invisible {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}