github.com/iqoqo/nomad@v0.11.3-0.20200911112621-d7021c74d101/ui/app/styles/components/tooltip.scss (about)

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