.bar {
    fill: red; /* changes the background */
    height: 21px;
    transition: fill .3s ease;
    cursor: pointer;
    font-family: Helvetica, sans-serif;
  }
  .bar text {
    color: black;
  }
  .bar:hover,
  .bar:focus {
    fill: black;
  }
  .bar:hover text,
  .bar:focus text {
    fill: red;
  }

  #tooltip {
    max-width: 250px;
    min-width: 120px;
    min-height: 40px;
    top: -20px;
    left: 50%;
    transform: translate(-50%, -100%);
    padding: 10px 20px;
    color: black;
    background-color: white;
    font-weight: normal;
    font-size: 13px;
    border-radius: 8px;
    position: absolute;
    z-index: 5000;
    box-sizing: border-box;
    box-shadow: 0px 1px 4px rgba(0,0,0,0.12) !important;
    visibility: visible;
    opacity: 0;
    display: none;
    font-family: "Arial";
    font-weight: bold;
}

#tooltip .tooltip-content {
  font-size: 14px;
  text-align: center;
  font-weight: bold;
}