github.com/pyroscope-io/pyroscope@v0.37.3-0.20230725203016-5f6947968bd0/webapp/javascript/ui/Tooltip.module.scss (about)

     1  .tooltip {
     2    position: absolute;
     3    white-space: nowrap;
     4    border: 1px solid var(--ps-ui-border);
     5    display: none;
     6    z-index: 2;
     7    background-color: var(--ps-ui-border);
     8    border-radius: 4px;
     9    font-size: 14px;
    10    line-height: 16px;
    11    padding: 4px 8px;
    12    cursor: default;
    13  
    14    &::before {
    15      content: '';
    16      width: 0;
    17      height: 0;
    18      margin: auto;
    19      position: absolute;
    20      border: 6px solid transparent;
    21    }
    22  }
    23  
    24  .visible {
    25    @extend .tooltip;
    26  
    27    display: block;
    28  }
    29  
    30  %top-before {
    31    border-top: 6px solid var(--ps-ui-border);
    32    bottom: -13px;
    33    left: 0;
    34    right: 0;
    35  }
    36  
    37  %bottom-before {
    38    border-bottom: 6px solid var(--ps-ui-border);
    39    top: -13px;
    40    left: 0;
    41    right: 0;
    42  }
    43  
    44  %right-before {
    45    border-right: 6px solid var(--ps-ui-border);
    46    left: -13px;
    47    top: 0;
    48    bottom: 0;
    49  }
    50  
    51  %left-before {
    52    border-left: 6px solid var(--ps-ui-border);
    53    right: -13px;
    54    top: 0;
    55    bottom: 0;
    56  }
    57  
    58  .top {
    59    @extend .tooltip;
    60  
    61    bottom: calc(100% + 7px);
    62  
    63    &::before {
    64      @extend %top-before;
    65    }
    66  }
    67  
    68  .bottom {
    69    @extend .tooltip;
    70  
    71    top: calc(100% + 7px);
    72  
    73    &::before {
    74      @extend %bottom-before;
    75    }
    76  }
    77  
    78  .right {
    79    @extend .tooltip;
    80  
    81    left: calc(100% + 7px);
    82  
    83    &::before {
    84      @extend %right-before;
    85    }
    86  }
    87  
    88  .left {
    89    @extend .tooltip;
    90  
    91    right: calc(100% + 7px);
    92  
    93    &::before {
    94      @extend %left-before;
    95    }
    96  }
    97  
    98  // trick to increase specificity to win against default classes
    99  .muiTooltip.muiTooltip {
   100    border: 1px solid var(--ps-mui-tooltip-background);
   101    background-color: var(--ps-mui-tooltip-background);
   102    border-radius: 4px;
   103    font-size: 14px;
   104    line-height: 16px;
   105    padding: 4px 8px;
   106  }
   107  
   108  .muiTooltipArrow.muiTooltipArrow {
   109    color: var(--ps-mui-tooltip-background);
   110  }