<div class="flex">
  <div>
    <input type="checkbox" id="check4">
    <label for="check4" class="circle"></label>
    <div class="pod">Участник Новогодней акции 2019</div>
  </div>
  <div>
    <input type="checkbox" id="check3">
    <label for="check3" class="circle"></label>
    <div class="pod">Участник Новогодней акции 2019</div>
  </div>

  <div>
    <input type="checkbox" id="check2">
    <label for="check2" class="circle sq"></label>
    <div class="pod">Участник Новогодней акции 2019</div>
  </div>
  <div>
    <input type="checkbox" id="check1">
    <label for="check1" class="circle"></label>
    <div class="pod">Участник Новогодней акции 2019</div>
  </div>
</div>

.flex {
  display: flex;
}
.circle {
  width: 30px;
  height: 30px;
  border:3px solid red;
  border-radius:50%;
  margin: 0px 2px;
  box-shadow: 2px 2px 7px 1px #00000080;
}
.pod {
  display: none;
   position:absolute;
   background: #eee;
  padding: 10px 20px;
  border-radius: 4px; 
  margin-top: 15px;
}
.pod:before {
    position: absolute;
    content: '';
    border: 15px solid transparent;
    border-bottom: 15px solid #eee;
    top: -27px;
    left: 6px;
}
label {
  display: block;
}
input[type="checkbox"] {
  display: none;
}
#check3:checked ~ .pod,
#check4:checked ~ .pod,
#check2:checked ~ .pod,
#check1:checked ~ .pod{
  display: block;
}