Всплывающая подсказка, сноска на CSS без JavaScript

Нужно оформить стилями checkbox таким образом, чтоб сам чекбокс скрыть: display:none; А ниже идущий label приподнять и стилизовать под кнопку. При нажатии которой загружалось значение data-title, при помощи функции attr().

.tip  {
  position: relative;
}
.tip input[id^="cb"] {display:none;}
.tip label:hover {
    outline: none;
    background-color: rgba(0,0,0,0.5);
}
.tip label {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    cursor: pointer;
    padding: .1em .4em;
    border: none;
    border-radius: .3em;
    background-color: rgba(0,0,0,0.1);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    font-size: .6em;
    vertical-align: super;
}
.tip input[id^="cb"]:checked ~ label:after {
    content: attr(data-title);
    position: absolute;
    background-color: #fcebcd;
    width: 280px;
    border-radius: 1em;
    padding: 15px;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    top: 33px;
    z-index: 2;
    font-weight: 400;
    font-size: 1.3em;
    margin: 0 -80px;
}
.tip input[id^="cb"]:checked ~ label:before { 
    content: ' ';
    position: absolute;
    border: 20px solid;
    top: 0px;
    left: -10px;
    border-color: transparent transparent #fcebcd transparent;
    z-index: 3;
}

Мы получаем сноску<span class="tip">
<input type="checkbox" id="cb-0">
<label for="cb-0" data-title="псевдоэлемент закроется при клике">1</label>
</span>