@nomios/web-uikit/dist/components/tooltip/Tooltip.css

Nomios' living web UIKit

/*
  Note: If you add a color here, please add it to "/stories/base/colors.css" as well
*/

/* ==========================================================================
  Fonts
  ========================================================================== */

/* ==========================================================================
  All typography variants

  $unit - Either em or rem
  ========================================================================== */

.tooltip {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999999
}

.tooltip .container {
        position: relative;
        transform: scale(0.9);
        opacity: 0;
        filter: drop-shadow(0 0.6rem 0.8rem rgba(75, 69, 61, 0.22));
        transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

.tooltip.enterActive .container, .tooltip.enterDone .container {
            transform: scale(1);
            opacity: 1;
        }

.tooltip.exit {
        pointer-events: none
    }

.tooltip.exit .container {
            transform: scale(1);
            transition: opacity 0.15s ease;
        }

.tooltip .arrow {
        position: absolute;
        width: 0;
        height: 0;
        z-index: 1;
        border-style: solid;
    }

.tooltip[data-placement="top"] {
            margin-bottom: 1.8rem;
        }

.tooltip[data-placement="top"] .arrow {
            bottom: -1rem;
            border-width: 1rem 0.9rem 0 0.9rem
        }

.tooltip[data-placement="top"] .arrow.light {
                border-color: #fff transparent transparent transparent;
            }

.tooltip[data-placement="top"] .arrow.dark {
                border-color: rgba(75, 69, 61, 0.8) transparent transparent transparent;
            }

.tooltip[data-placement="right"] {
            margin-left: 1.8rem;
        }

.tooltip[data-placement="right"] .arrow {
            left: -1rem;
            border-width: 0.9rem 1rem 0.9rem 0
        }

.tooltip[data-placement="right"] .arrow.light {
                border-color: transparent #fff transparent transparent;
            }

.tooltip[data-placement="right"] .arrow.dark {
                border-color: transparent rgba(75, 69, 61, 0.8) transparent transparent;
            }

.tooltip[data-placement="bottom"] {
            margin-top: 1.8rem;
        }

.tooltip[data-placement="bottom"] .arrow {
            top: -1rem;
            border-width: 0 0.9rem 1rem 0.9rem
        }

.tooltip[data-placement="bottom"] .arrow.light {
                border-color: transparent transparent #fff transparent;
            }

.tooltip[data-placement="bottom"] .arrow.dark {
                border-color: transparent transparent rgba(75, 69, 61, 0.8) transparent;
            }

.tooltip[data-placement="left"] {
            margin-right: 1.8rem;
        }

.tooltip[data-placement="left"] .arrow {
            right: -1rem;
            border-width: 0.9rem 0 0.9rem 1rem
        }

.tooltip[data-placement="left"] .arrow.light {
                border-color: transparent transparent transparent #fff;
            }

.tooltip[data-placement="left"] .arrow.dark {
                border-color: transparent transparent transparent rgba(75, 69, 61, 0.8);
            }

.tooltipContent {
    position: relative;
    font-family: "IbmPlexMono", monospace;
    font-weight: 400;
    font-size: 1.2rem;
    line-height: calc(2em / 1.2);
    z-index: 2;
    padding: 2rem 2.5rem;
    text-align: left
}

.tooltipContent.light {
        background-color: #fff;
        color: #4b453d;
    }

.tooltipContent.dark {
        background-color: rgba(75, 69, 61, 0.8);
        color: #fff;
    }