@mixin tooltip-container() {
  .tooltipContainer {
    position: relative;
    &:hover {
      .tooltips {
        display: block;
      }
    }
    .tooltips {
      display: none;
      position: absolute;
      top: -40px;
      left: 10%;
      background: $black; // set theme
      border: solid 1px $black; // set theme
      color: $white;
      padding: 5px;
      font-size: 12px;
      word-break: normal;
      user-select: none;
      text-align: center;
      word-break: normal;
      z-index: 1;
      &:after {
        content: "";
        position: absolute;
        bottom: -6px;
        left: 0;
        right: 0;
        margin: 0 auto;
        width: 0;
        height: 0;
        border-top: 5px solid $black; // set theme
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
      }
    }
  }
}