github.com/Ilhicas/nomad@v1.0.4-0.20210304152020-e86851182bc3/ui/app/styles/components/tooltip.scss (about)

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