github.com/anth0d/nomad@v0.0.0-20221214183521-ae3a0a2cad06/ui/app/styles/charts/tooltip.scss (about)

     1  .chart {
     2    position: relative;
     3  }
     4  
     5  .chart-tooltip {
     6    position: absolute;
     7    top: 0;
     8    display: none;
     9    background: $white;
    10    color: rgba($black, 0.6);
    11    border: 1px solid $grey;
    12    min-width: 150px;
    13    margin-top: -10px;
    14    transform: translate(-50%, -100%);
    15    transition: 0.2s top ease-out, 0.2s left ease-out;
    16    pointer-events: none;
    17    z-index: $z-tooltip;
    18  
    19    &.is-snappy {
    20      transition: 0.2s top ease-out, 0.05s left ease-out;
    21    }
    22  
    23    &::before {
    24      pointer-events: none;
    25      display: inline-block;
    26      content: '';
    27      width: 0;
    28      height: 0;
    29      border-top: 7px solid $grey;
    30      border-right: 7px solid transparent;
    31      border-left: 7px solid transparent;
    32      position: absolute;
    33      transform: translateX(-7px);
    34      left: 50%;
    35      bottom: -8px;
    36      z-index: $z-tooltip;
    37    }
    38  
    39    &::after {
    40      pointer-events: none;
    41      display: inline-block;
    42      content: '';
    43      width: 0;
    44      height: 0;
    45      border-top: 6px solid $white;
    46      border-right: 6px solid transparent;
    47      border-left: 6px solid transparent;
    48      position: absolute;
    49      transform: translateX(-6px);
    50      left: 50%;
    51      bottom: -6px;
    52      z-index: $z-tooltip;
    53    }
    54  
    55    &.active {
    56      display: block;
    57    }
    58  
    59    ol {
    60      list-style: none;
    61  
    62      &.is-static {
    63        .label {
    64          color: $black;
    65          background: $white;
    66        }
    67      }
    68    }
    69  
    70    ol > li {
    71      display: flex;
    72      flex-flow: row;
    73      flex-wrap: nowrap;
    74      justify-content: space-between;
    75      padding: 0.25rem 0.5rem;
    76      white-space: nowrap;
    77  
    78      span {
    79        display: inline-block;
    80      }
    81  
    82      .label {
    83        white-space: nowrap;
    84        font-weight: $weight-bold;
    85        color: $black;
    86        margin: 0;
    87  
    88        &.is-empty {
    89          color: rgba($grey, 0.6);
    90        }
    91      }
    92  
    93      .value {
    94        padding-left: 1em;
    95      }
    96  
    97      + li {
    98        border-top: 1px solid $grey-light;
    99      }
   100    }
   101  
   102    &.with-active-datum {
   103      li .label {
   104        color: rgba($black, 0.6);
   105      }
   106  
   107      li.is-active {
   108        color: $black;
   109        background: $white-ter;
   110  
   111        .label {
   112          color: $black;
   113        }
   114      }
   115    }
   116  }