<div class="container-outer">
  <div class="container-inner">

    <p>Custom Radio Buttons</p>
    <label class="custom-radio-button-container tooltip">
      <input type="radio" checked="checked" name="the-options" value="A">
      <span class="custom-radio-button radio-a"></span>
      <span class="tooltiptext">Option A</span>
    </label>
    <label class="custom-radio-button-container tooltip">
      <input type="radio" name="the-options" value="B">
      <span class="custom-radio-button radio-b"></span>
      <span class="tooltiptext">Option B</span>
    </label>
    <label class="custom-radio-button-container tooltip">
      <input type="radio" name="the-options" value="C">
      <span class="custom-radio-button radio-c"></span>
      <span class="tooltiptext">Option C</span>
    </label>

    <br><br><button onclick="showValue()">Show value</button>
    
  </div> <!-- .container-inner -->

 </div> <!-- .container-outer -->

@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Montserrat, sans-serif;
}
.container-outer { 
  display: flex; 
  height: 100vh;
  background: #f5f0f1;
}
.container-inner {
  background: white;
  position: relative;
  border: 1px solid #bbb;
  border-radius: 5px;
  width: 300px;
  padding: 24px 32px;
  margin: auto;
  top: 0;
  left: 0;
  box-shadow: none;
    transition: top 350ms, left 350ms, box-shadow 350ms;
}
.container-inner:hover {
  top: -1px;
  left: -1px;
  box-shadow: 3px 3px 5px #bbb;
}
p {
  font-size: 0.9em;
  color: #6e6e6e;
  margin: 0 0 32px; 
}
button { 
  padding: 8px;
  border-radius: 5px;
  background: white;
  border: 1px solid #bbb;
  color: #6e6e6e;
  margin-top: 8px;
  transition: background 350ms;
}
button:hover {
  background: #eee;
}


/*** 
 * CUSTOM RADIO BUTTONS 
 * ref: https://www.w3schools.com/howto/howto_css_custom_checkbox.asp
 ***/
/* The custom radio button container */
.custom-radio-button-container {
  position: relative;
  padding-left: 14px;
  cursor: pointer;
  font-size: 14px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: #aaa;
}

/* Hide the default radio button */
.custom-radio-button-container input {
  /* position: absolute; */
  opacity: 0;
}

/* Create a custom radio button */
.custom-radio-button {
  position: absolute;
  top: 0;
  left: 0;
  height: 24px;
  width: 24px;
  background-color: #eee;
  border-radius: 5px;
  transition: background 350ms;
}

/* Create the letters */
.radio-a:after {
  content: "A";
  position: absolute;
}
.radio-b:after {
  content: "B";
  position: absolute;
}
.radio-c:after {
  content: "C";
  position: absolute;
}

/* Position the letters */
.custom-radio-button-container .custom-radio-button:after {
  top: 3px;
  left: 7px;
}

/* On mouse-over, add a darker grey background color... */
.custom-radio-button-container:hover input ~ .custom-radio-button {
  background-color: #ccc;
}
/* ...and a lighter letter */
.custom-radio-button-container:hover input ~ .custom-radio-button:after {
  color: white;
}

/* When the radio button is checked, add a blue background... */
.custom-radio-button-container input:checked ~ .custom-radio-button {
  background-color: #ff96F3; /* blue: #2196F3 */
}
/* ...and a white letter */
.custom-radio-button-container input:checked ~ .custom-radio-button:after {
  display: block;
  color: white;
}


/*** 
 * TOOLTIPS 
 * ref: https://www.w3schools.com/css/css_tooltip.asp
 ***/
/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
}
  
  /* Tooltip text */
.tooltip .tooltiptext {
/*     visibility: hidden; */
    width: 66px;
    background-color: #ccc;
    color: #fff;
    text-align: center;
    padding: 3px 0;
    border-radius: 5px;
  font-size: 0.8em;
   
    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    bottom: 135%;
    left: 50%;
    margin-left: -33px;
  opacity: 0;
  transition: opacity 350ms;
}
  
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
/*     visibility: visible; */
  opacity: 1;
}

/* tooltip arrow */
.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 100%; /* At the bottom of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #ccc transparent transparent transparent;
}

function showValue() {
  alert('Option ' + document.querySelector('input[name="the-options"]:checked').value + ' selected.');
  console.log('Option ' + document.querySelector('input[name="the-options"]:checked').value + ' selected.');
}