github.com/hernad/nomad@v1.6.112/ui/app/styles/components/tooltip_legacy.scss (about)

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