github.com/emate/nomad@v0.8.2-wo-binpacking/ui/app/styles/components/tooltip.scss (about)

     1  .tooltip {
     2    position: relative;
     3  }
     4  
     5  .tooltip::after {
     6    content: attr(aria-label);
     7    background: $black;
     8    border-radius: $radius;
     9    display: inline-block;
    10    opacity: 0;
    11    max-width: 250px;
    12    color: $white;
    13    font-size: $size-7;
    14    overflow: hidden;
    15    text-overflow: ellipsis;
    16    line-height: 1.25;
    17    white-space: nowrap;
    18    vertical-align: middle;
    19    padding: 5px 10px;
    20    margin: 0;
    21    position: absolute;
    22    z-index: $z-tooltip;
    23    bottom: 100%;
    24    left: 50%;
    25    transform: translateX(-50%);
    26    pointer-events: none;
    27    transition: bottom 0.1s ease-in-out;
    28  }
    29  
    30  .tooltip::before {
    31    pointer-events: none;
    32    display: block;
    33    opacity: 0;
    34    content: '';
    35    width: 0;
    36    height: 0;
    37    border-top: 6px solid $black;
    38    border-right: 6px solid transparent;
    39    border-left: 6px solid transparent;
    40    position: absolute;
    41    top: 0;
    42    left: 50%;
    43    margin-left: -6px;
    44    z-index: $z-tooltip;
    45    transition: top 0.1s ease-in-out;
    46  }
    47  
    48  .tooltip:hover::after {
    49    opacity: 1;
    50    bottom: 120%;
    51  }
    52  
    53  .tooltip:hover::before {
    54    opacity: 1;
    55    top: -20%;
    56  }