.ohke-help {
  position: relative;
  display: inline-block;
  color: #2d61a7;
  cursor: pointer;
}
.tooltip {
  visibility: hidden;
  z-index: 5;
  opacity: .40;
  text-align: left;
  width: max-content;
  max-width: 100px;
  padding: 8px;
  background: #333;
  color: #f2f2f2;
  position: absolute;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(56, 54, 54, 0.86);
}
@media screen and (min-width: 300px){
  .tooltip, .help { max-width: 200px}
}
@media screen and (min-width: 400px){
  .tooltip, .help { max-width: 300px}
}
@media screen and (min-width: 500px){
  .tooltip, .help { max-width: 400px}
}
@media screen and (min-width: 600px){
  .tooltip, .help { max-width: 400px}
}
.tooltip::after {
  content: " ";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 13px 0 13px;
  border-color: #333 transparent transparent transparent;
  position: absolute;
  left: 20%;
}

.ohke-help:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

.tip-top .tooltip {
  top: -220%;
  left: -25%;
}
.tip-top .tooltip::after {
  top: 85%;
}
.tip-left .tooltip {
  top: -20%;
  left: -200%;
}

.tip-left .tooltip::after {
  top: 40%;
  left: 75%;
  transform: rotate(-90deg);
}

.tip-bottom .tooltip {
  top: 130%;
  left: -26px;
}

.tip-bottom .tooltip::after {
  top: -13%;
  left: 18px;
  transform: rotate(180deg);
}

.tip-right .tooltip {
  top: -6px;
  left: 22px;
}

.tip-right .tooltip::after {
  top: 9px;
  left: -15px;
  transform: rotate(90deg);
}
.ohke-floating-container .help.show{
  visibility: visible;
}
.ohke-floating-container .help {
  z-index: 9999;
  display: block;
  visibility: hidden;
  text-align: left;
  width: max-content;
  padding: 8px;
  background: var(--dark-color);
  color: var(--white);
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(56, 54, 54, 0.86);
}