@opalkelly/frontpanel-react-components/src/primitives/Tooltip/Tooltip.css

React Component Library for OpalKelly FrontPanel application development

/**
 * Copyright (c) 2024 Opal Kelly Incorporated
 *
 * This source code is licensed under the FrontPanel license.
 * See the LICENSE file found in the root directory of this project.
 */

.okTooltipContent {
    /* Layout */
    display: flex;
    padding: 10px;
    align-items: flex-end;

    /* Style */
    border-radius: 4px;
    background: var(--Dark, #343434);

    /* Drop shadow - tiny */
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.24);

    user-select: none;
    animation-duration: 200ms;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

.okTooltipContent[data-state="delayed-open"][data-side="top"] {
    animation-name: slideDownAndFade;
}
.okTooltipContent[data-state="delayed-open"][data-side="right"] {
    animation-name: slideLeftAndFade;
}
.okTooltipContent[data-state="delayed-open"][data-side="bottom"] {
    animation-name: slideUpAndFade;
}
.okTooltipContent[data-state="delayed-open"][data-side="left"] {
    animation-name: slideRightAndFade;
}

.okTooltipText {
    /* Typography */
    color: var(--Light, #fff);
    text-align: center;
    font-family: Inter, "Nunito Sans", sans-serif, ui-sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 12px; /* 100% */
}

@keyframes slideUpAndFade {
    from {
        opacity: 0;
        transform: translateY(2px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideRightAndFade {
    from {
        opacity: 0;
        transform: translateX(-2px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideDownAndFade {
    from {
        opacity: 0;
        transform: translateY(-2px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideLeftAndFade {
    from {
        opacity: 0;
        transform: translateX(2px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}