ceph/src/pybind/mgr/dashboard/frontend/src/styles/chart-tooltip.scss

   1 @import 'defaults';
   2
   3 .chart-container {
   4   position: absolute;
   5   margin: auto;
   6   cursor: pointer;
   7   overflow: visible;
   8 }
   9
  10 canvas {
  11   -moz-user-select: none;
  12   -webkit-user-select: none;
  13   -ms-user-select: none;
  14   user-select: none;
  15 }
  16
  17 .chartjs-tooltip {
  18   opacity: 0;
  19   position: absolute;
  20   background: $color-chart-tooltip-bg;
  21   color: $color-chat-tooltip-text;
  22   border-radius: 3px;
  23   -webkit-transition: all 0.1s ease;
  24   transition: all 0.1s ease;
  25   pointer-events: none;
  26   font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif !important;
  27
  28   -webkit-transform: translate(-50%, 0);
  29   transform: translate(-50%, 0);
  30
  31   &.transform-left {
  32     transform: translate(-10%, 0);
  33
  34     &::after {
  35       left: 10%;
  36     }
  37   }
  38
  39   &.transform-right {
  40     transform: translate(-90%, 0);
  41
  42     &::after {
  43       left: 90%;
  44     }
  45   }
  46 }
  47
  48 .chartjs-tooltip::after {
  49   content: ' ';
  50   position: absolute;
  51   top: 100%; /* At the bottom of the tooltip */
  52   left: 50%;
  53   margin-left: -5px;
  54   border-width: 5px;
  55   border-style: solid;
  56   border-color: $color-chart-tooltip-border transparent transparent transparent;
  57 }
  58
  59 ::ng-deep .chartjs-tooltip-key {
  60   display: inline-block;
  61   width: 10px;
  62   height: 10px;
  63   margin-right: 10px;
  64 }