JSFiddle - React, Tailwind, and code Playground

by satantx

HTML

<input type="radio" name="insure" value="Нет" checked="" class="radio" id="id1">
<label for="id1" class="radio-label">Нет? <span data-alt="Без возмещения стоимости заказа в случае его порчи или пропажи в транспортной компании">?</span></label>
<input type="radio" name="insure" value="Да" class="radio" id="id2">
<label for="id2" class="radio-label">Да <span data-alt="Гарантия возмещения стоимости заказа в случае его порчи или пропажи в транспортной компании">?</span></label>

CSS

body {
  font-family: 'Open Sans', verdana, sans-serif;
}

.radio-label {
  display: block;
  position: relative;
  padding-left: 30px;
  line-height: 20px;
  margin-bottom: 20px;
  font-size: 14px;
}

.radio-label:before {
  content: '';
  width: 18px;
  height: 18px;
  border-radius: 100%;
  position: absolute;
  left: 0; top: 0;
  box-shadow: 0 1px 0 #fff;
  background: #F9F9F9;
  border: 1px solid #CFC8BC;
}

.radio-label:after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 100%;
  position: absolute;
  left: 5px; top: 5px;
  background: #FEA411;
  z-index: 2;
  display: none;
}

.radio-label span {
  display: inline-block;
  vertical-align: top;
  font-size: 10px;
  font-weight: bold;
  background: #71AE1D;
  width: 14px;
  height: 14px;
  line-height: 14px;
  color: #fff;
  border-radius:100%;
  text-align: center;
  position: relative;
}

.radio-label span:after {
  content: attr(data-alt);
  position: absolute;
  left: 50%; bottom: 110%;
  width: 200px;
  padding:0 10px;
  background:#FCFCFC;
  color: #333;
  margin-left: -100px;
  opacity: 0;
  visibility: hidden;
  transition: .2s;
  z-index: 2;
}

.radio-label span:hover:after {
  padding: 10px;
  opacity: 1;
  visibility: visible;
}

.radio {display: none;}

.radio:checked+.radio-label:after {
  display: block;
}