github.com/hspak/nomad@v0.7.2-0.20180309000617-bc4ae22a39a5/ui/app/styles/charts/tooltip.scss (about)

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