CSS Tooltip for Keys of the Simple Keyboard plugin

keyboard-tooltip.css

.simple-keyboard .hg-button { position: relative; }
.simple-keyboard .hg-button:before {
    background: #333;
    border-radius: 4px;
    box-shadow: 0 2px 10px 2px rgba(0, 0, 0, .1);
    color: #fff;
    font-size: 13px;
    padding: 5px 10px;
    position: absolute;
    bottom: calc(100% + 10px);
    text-align: center;
    transform: scaleY(0) translateY(100%);
    transform-origin: bottom;
    transition: all .2s ease-in-out;
    white-space: nowrap;
    z-index: 9;
}
.simple-keyboard .hg-button:after {
    border: 6px solid;
    border-color: #333 transparent transparent;
    position: absolute;
    bottom: calc(100% - 2px);
    transform: scaleY(0);
    transform-origin: top;
    transition: all .3s ease-in-out;
    z-index: 10;
}

.simple-keyboard .hg-button:hover:before {
    transform: scaleY(100%) translateY(0);
}

.simple-keyboard .hg-button:hover:after {
    transform: scaleY(100%);
}

/* activate the tooltip for a button */
.simple-keyboard .hg-button[data-skbtn=a]:after { content: '' }
.simple-keyboard .hg-button[data-skbtn=a]:before { content: '[a, b, c]' }